threejs加载3d模型 怎样控制鼠标点击选中某个模型
[问题点数：40分，结帖人mxn0829]
本版专家分：0
结帖率 66.67%
CSDN今日推荐
本版专家分：0
结帖率 66.67%
本版专家分：0
本版专家分：0
匿名用户不能发表回复！|
CSDN今日推荐在线急等，关于网页中如何通过threejs 导入带动画的模型_百度知道
在线急等，关于网页中如何通过threejs 导入带动画的模型
maya什么的一点都不懂，以前也没用过这些软件，three也是最近几天才看，这两天在网上花钱买了个带动画的模型（就是一个战斗机模型，后面带飞机飞行时喷火动画以及尾翼可以在改变方向时旋转的动画） 文件后缀是.mb结尾的，我该怎么导入这个模...
我有更好的答案
额 这个很简单啊红包都就没必要了。你的问题是maya的obj模型 你要转化成three.js的json格式。threejs提供了这个工具three/utils/exporters/maya/plug-ins中是python的你上github下一份three的源码就好啦就可以用了
采纳率：84%
建议你去翼虎网找一些教程学习一下
你怎么不说去印度理工学习一下呢？ 不打广告会死吗？
考！你爱学不学！管我屁事
初中生就开始学这个了，不得不说佩服，关于three.js用外部模型创建动画主要有一下三种方式：1.带有json导出器的blender，也就是说使用blender这个软件编辑模型的动画导出json格式的模型。2.Collada模型： Collada模型也支持动画，这个一般用的比较少，3.MD2模型：MD2模型是老式雷神引擎所使用的简单格式。我们只要关注第一种就好。关于第一种blender这里我就不多阐述，自行搜索相关软件的教程，他可以打开已有的模型然后定义骨骼顶点进行格式转换的，给个方向自行研究去。
1条折叠回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。博客分类：
ThreeJS创建3D的基本步骤：
创建摄像机
//添加相机到场景中
创建渲染器
设置渲染器的大小
设置渲染器的背景
将渲染器的DOM元素添加到页面容器
进行渲染（renderer.render(scene, camera)）
-----------------------------------------
设置光源的位置
添加光源到场景中
创建角色（var cube = new THREE.Mesh(geometry, material);）
添加角色到场景中
=========================================
THREE.Light(hex);//光源基类（参数hex，一个16进制的颜色值）
如：var redLight = new THREE.Light(0xFF0000);//红光
------------
常见光源有：
环境光 —— THREE.AmbientLight( hex );
点光源 —— THREE.PointLight( hex, intensity, distance );//hex：颜色，intensity：强度，distance：距离
聚光灯 —— THREE.SpotLight( hex, intensity, distance, angle, exponent );//hex：颜色，intensity：强度，distance：距离，angel：着色角度(弧度)，expoent：衰减指数
方向光 —— THREE.DirectionalLight(hex, intensity);//又称平行光。hex：颜色，intensity：强度
区域光 —— THREE.AreaLight(hex, intensity);//hex：颜色，intensity：强度
=========================================
THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
var texture = THREE.ImageUtils.loadTexture("textures/a.jpg",null,function(t){
浏览: 35140 次
msdghs 写道楼主，我下载了demo跑不起来，是哪里没设置 ...
楼主，我下载了demo跑不起来，是哪里没设置正确么；
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'通过知道创建一个相机的相关知识点
var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );
视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
纵横比：aspect
(3d物体的宽/高比例)
相机离视体积最近的距离：near
相机离视体积最远的距离：far
其中fov视野角(拍摄距离)越大，场景中的物体越小。fov视野角(拍摄距离)越小，场景中的物体越大。
透视相机(近大远小)
PerspectiveCamera
//透视照相机参数设置
var fov = 45,//拍摄距离
视野角值越大，场景中的物体越小
near = 1,//相机离视体积最近的距离
far = 1000,//相机离视体积最远的距离
window.innerWidth / window.innerH //纵横比
var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);
改变fov的值，并更新这个照相机
//改变fov值，并更新场景的渲染
camera.fov =
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
鼠标上下滑轮实现放大缩小效果
//监听鼠标滚动事件
canvas.addEventListener('mousewheel', mousewheel, false);
//鼠标滑轮-鼠标上下滑轮实现放大缩小效果
function mousewheel(e) {
e.preventDefault();
//e.stopPropagation();
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta & 0) { //当滑轮向上滚动时
fov -= (near & fov ? 1 : 0);
if (e.wheelDelta & 0) { //当滑轮向下滚动时
fov += (fov & far ? 1 : 0);
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail & 0) { //当滑轮向上滚动时
if (e.detail & 0) { //当滑轮向下滚动时
//改变fov值，并更新场景的渲染
camera.fov =
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
实现效果完整代码 &标注具体案例为个人原创
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&threejs中3D视野的缩放&/title&
#canvas-frame {
width: 100%;
height: 600
&body onload="threeStart()"&
&div id="canvas-frame" &&/div&
&script type="text/javascript" src="./lib/three.js" &&/script&
&script type="text/javascript"&
var renderer, //渲染器
width = document.getElementById('canvas-frame').clientWidth, //画布宽
height = document.getElementById('canvas-frame').clientH //画布高
//照相机配置
var fov = 45,//拍摄距离
视野角值越大，场景中的物体越小
near = 1,//最小范围
far = 1000;//最大范围
var canvas =
//初始化DOM对象
function initDOM(){
canvas = document.getElementById("canvas-frame");
//初始化渲染器
function initThree(){
renderer = new THREE.WebGLRenderer({
antialias : true
//canvas: document.getElementById('canvas-frame')
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF, 1.0);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
//初始化场景
function initScene(){
scene = new THREE.Scene();
function initCamera() {
//透视相机
camera = new THREE.PerspectiveCamera(fov,
width/height , near, far);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z =250;
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
camera.lookAt({
//相机的中心点
function initLight(){
// light--这里使用环境光
//var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
//light.position.set(600, );
/* var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
light.position.set(600, ); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
scene.add(light);*/
function initObject(){
//初始化对象
//初始化地板
initFloor();
function initGrid(){ //辅助网格
var helper = new THREE.GridHelper( 1000, 50 );
helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
function initFloor(){
//创建一个立方体
var geometry = new THREE.BoxGeometry(80, 20, 80);
for ( var i = 0; i & geometry.faces. i += 2 ) {
var hex = Math.random() * 0
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
//将material材料添加到几何体geometry
var mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
//初始化页面加载
function threeStart(){
//初始化DOM对象
initDOM();
//初始化渲染器
initThree();
//初始化场景
initScene();
//初始透视化相机
initCamera();
//初始化光源
initLight();
//模型对象
initObject();
//初始化网格辅助线
initGrid();
renderer.render(scene, camera);
//实时动画
//animation();
//监听鼠标滚动事件
canvas.addEventListener('mousewheel', mousewheel, false);
function animation(){
//相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
var timer = Date.now()*0.0001;
camera.position.x = Math.cos(timer)*100;
camera.position.z = Math.sin(timer)*100;
camera.lookAt(scene.position);
renderer.render(scene, camera);
requestAnimationFrame(animation);
//鼠标滑轮-鼠标上下滑轮实现放大缩小效果
function mousewheel(e) {
e.preventDefault();
//e.stopPropagation();
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta & 0) { //当滑轮向上滚动时
fov -= (near & fov ? 1 : 0);
if (e.wheelDelta & 0) { //当滑轮向下滚动时
fov += (fov & far ? 1 : 0);
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail & 0) { //当滑轮向上滚动时
if (e.detail & 0) { //当滑轮向下滚动时
console.info('camera.fov:'+camera.fov);
console.info('camera.x:'+camera.position.x);
console.info('camera.y:'+camera.position.y);
console.info('camera.z:'+camera.position.z);
//改变fov值，并更新场景的渲染
camera.fov =
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
文章缩放来源 &http://blog.csdn.net/u_9_5/article/details/
阅读(...) 评论()threejs - 2 - 相机 - 简书
threejs - 2 - 相机
常见的相机有两类：透视相机 和 正交相机
透视相机：成像有近大远小的感觉
正交相机：没有近大远小的感觉，类似工程制图
透视相机在ThreeJs里面对应的类是THREE.PerspectiveCamera，这个类需要4个参数：视角、近平面距离、远平面距离、宽高比。如果在加上相机的位置和相机照相的方向（lookAt）就可以在三维空间中唯一确定一个空间，出现在这个空间的物体最后就会被渲染出来（近大远小）。
图片来自网络
正交相机在ThreeJs里面对应的类是THREE.OrthographicCamera，这个类需要6个参数：左边偏移（偏移是相对于相机中心位置，不是坐标），右偏移，上偏移，下偏移，近平面距离、远平面距离。当然这个相机也是需要一个位置和lookAt方向的
在原点添加一个立方体，使用不同的相机观察
var scene = new THREE.Scene();
* 视角 ： 45度
* 宽高比 ： window.innerWidth / window.innerHeight
* 近平面距离 ： 1
* 远平面距离 ： 1000
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
camera.position.set(10,10,10); // 相机的位置
camera.lookAt(0,0,0); // 相机看着的方向
* OrthographicCamera( left, right, top, bottom, near, far )
* 这里的 20 不是坐标
是偏移量哈
* 这里添加了一个比例，如果相机的宽度个高度的比例和渲染的比例对不上，最后渲染出来就会变形
var acspet = window.innerWidth / window.innerH
var camera1 = new THREE.OrthographicCamera(-5 * acspet,5 * acspet ,5,-5,1,100);
camera1.position.set(10,10,10);
camera1.lookAt(0,0,0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
var box = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xffff00,wireframe:true
box.position.set(0,0,0);
scene.add(box);
document.getElementById("content").appendChild(renderer.domElement);
// 这里切换不同的相机
renderer.render(scene,camera1);
主要的相机就这两种：正交相机 和 透视相机
相机辅助线
有时候我们想看看相机的可视范围，这时候就需要添加一些辅助线帮助我们创建设置相机参数。使用的是THREE.CameraHelper这个类需要注意的是需要事先将相机对象添加到场景中
场景中可以有多个相机，不同的相机有不同的视角，最后使用不同的视角渲染出来的效果就不同。还有一个意识需要建立起来，就是 camera 和 renderer是独立的，不同的不同的renderer渲染到的dom不同，不同的camera角度不同可以结合起来使用
又不牛逼写啥子简介~~
本文主要是讲解 Three.js 的相关概念，帮助大家对 Three.js 以及相关知识形成比较完整的理解。今年来 web 得到了快速的发展，随着 HTML5 的普及，网页的表现能力越来越大。网页上已经可以做出很多复杂的动画，精美的效果。在学习 Three.js 之前，让我...
由于对WebGL的兴趣，初步接触Three.js，决定将学习过程进行记录，以便于后期复习。 初步以实现3D机房为目标，熟悉Three.js，初步设想3D机房构思如图1： 一、下载Three.js 先去下载代码，它的地址是： https://github.com/mrdoob...
苹果在 WWDC2017 中推出了 ARKit，通过这个新框架可以看出苹果未来会在 AR 方向不断发展，本着学习兴趣，对此项新技术进行了学习，并在团队进行了一次分享，利用业余时间把几周前分享的内容整理成文档供大家交流学习。 本文并不是简单的介绍 ARKit 中的 API 如...
Three.js 1. 概述 1.1 什么是Three.js Three.js是一个3D javascript库。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。 1.2 使用Three.js Th...
在开始谈 WebVR 前，我们先来看看人眼中的三维立体是如何产生的。 外部世界是三维立体的，但是它在我们的视网膜上留下的投影却是二维的。因为大脑会自动利用视觉信息中的各种深度知觉的线索，“重建”出立体的感知。人眼立体视觉的原理基本是依靠深度知觉+双眼视差。 WebVR AP...
每次都是沟通无果的某妈，又和某爸要沟通一下思想，必然的无果。 于是------ 某爸铿锵有力，转身对着未上学的孩子高声说到: 爸爸能挣多少钱，你就上多少钱的学 ! 爸爸挣不到钱，你就不上学 ! 爸爸现在只能保证你------接受普通的教育没问题。 宝贝哭道 : 我不 ! 我...
晚上，我练完字，感觉很是孤寂，便拍了几个字发朋友圈，想引起一下朋友的关注。一个朋友看了，问我最近在干什么，我一向不把工作看成我生活的一部分，便答，读书，写字，看电影。读书、写字、看电影是我的兴趣，也占据了我空闲生活的大部分。朋友回道，好惬意。这一下引起了我内心的一些情绪，他...
昨天下午，原本打算认真工作的小编炮，却突然遭遇办公室的网络故障，英雄无用……可就在小编炮百无聊赖，感到生无可恋的时候，一个神秘的黑衣人出现了。 神秘人告诉小编炮，他有一个神奇的盒子，不需要手机流量，不需要下载APP，只要带上手机，即使去到没有信号的荒山野岭也能肆意享受看片！...
你用两个小时的时间来证明我们不合适，悄无声息的来到我的世界，留下痕迹，却悄无声息的走去。我说恨也不算，爱也不算。
一周總結：1.蘑菇定律：管理在培養員工時，给他們足夠的關懷、溫暖多些鼓勵少些歧視。嚴格要求他們做事情，更好的促進他們成長。 2. 師徒制：師徒制使老員工進步，只有自己有了足夠的技能才能教好自己的徒弟。師徒制是一舉兩得的好方法。 3. 情景管理：我们应该根据员工处于的阶段去管...