three.js加载3ds或obj模型，如何实现鼠标拖拽等功能？
2个回答
2018-01-10 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OBJLoader.js"></script>
<script type="text/javascript">
var scene = null;
var camera = null;
var renderer = null;
var mesh = null;
var id = null;
function init() {
renderer = new THREE.WebGLRenderer({//渲染器
canvas: document.getElementById('mainCanvas')//画布
});
renderer.setClearColor(0x000000);//画布颜色
scene = new THREE.Scene();//创建场景
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相机
camera.position.set(15, 25, 25);//相机位置
camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()设置相机所看的位置
scene.add(camera);//把相机添加到场景中
var loader = new THREE.OBJLoader();//在init函数中，创建loader变量，用于导入模型
loader.load('libs/port.obj', function(obj) {//第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
mesh = obj;//储存到全局变量中
scene.add(obj);//将导入的模型添加到场景中
});
var light = new THREE.DirectionalLight(0xffffff);//光源颜色
light.position.set(20, 10, 5);//光源位置
scene.add(light);//光源添加到场景中
id = setInterval(draw, 20);//每隔20s重绘一次
}
function draw() {//们在重绘函数中让茶壶旋转：
renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
mesh.rotation.y += 0.01;//添加动画
if (mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}
}
</script>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="800px" height="600px" ></canvas>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
【OrbitControls】
// Set to false to disable this control
//鼠标控制是否可用
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
//聚焦坐标
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
//最大最小相机移动距离(景深相机)
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
//最大最小鼠标缩放大小（正交相机）
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
//最大仰视角和俯视角
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
//水平方向视角限制
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
//惯性滑动，滑动大小默认0.25
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
//滚轮是否可控制zoom，zoom速度默认1
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
//是否可旋转，旋转速度
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
//是否可平移，默认移动速度为7px
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
//是否自动旋转，自动旋转速度。默认每秒30圈
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
//是否能使用键盘
this.enableKeys = true;
// The four arrow keys
//默认键盘控制上下左右的键
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
//鼠标点击按钮
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// Set to false to disable this control
//鼠标控制是否可用
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
//聚焦坐标
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
//最大最小相机移动距离(景深相机)
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
//最大最小鼠标缩放大小（正交相机）
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
//最大仰视角和俯视角
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
//水平方向视角限制
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
//惯性滑动，滑动大小默认0.25
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
//滚轮是否可控制zoom，zoom速度默认1
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
//是否可旋转，旋转速度
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
//是否可平移，默认移动速度为7px
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
//是否自动旋转，自动旋转速度。默认每秒30圈
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
//是否能使用键盘
this.enableKeys = true;
// The four arrow keys
//默认键盘控制上下左右的键
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
//鼠标点击按钮
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
