animation - 三 JS:使用轨迹球控制在其轴上旋转对象
问题描述
在这里,我试图通过旋转相机而不是对象来使用轨迹球在其轴上旋转对象。我在三个 JS 中使用了四元数理论,通过旋转对象,我需要借助轨迹球控制中的相机在其轴上旋转对象。这是小提琴http://jsfiddle.net/xvzh7yqk/
initScene = function() {
var canvasWidth = 500;
var canvasHeight = 500;
var scene3d;
init();
animate();
// init scene
function init(){
//new THREE.Scene
scene3d = new THREE.Scene();
//set the scene
var canvas3d = $( '#canvas3d' );
//new THREE.WebGLRenderer
renderer = new THREE.WebGLRenderer( { canvas: canvas3d.get( 0 ), antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( 0x121224, 1 );
//new THREE.PerspectiveCamera
var camera = new THREE.PerspectiveCamera( 45, canvasWidth / canvasHeight, 0.1, 10000 );
camera.name = 'camera';
scene3d.add( camera );
// TEST =============
var geom = new THREE.BoxGeometry( 2, 2, 2 );
var mat = new THREE.MeshPhongMaterial( { color: 0xff0000, side: THREE.DoubleSide});
var cube = new THREE.Mesh( geom, mat );
var pos = new THREE.Vector3( 0, 0 ,0 );
cube.position.set( pos.x, pos.y, pos.z );
scene3d.add(cube);
camera.position.set( pos.x, pos.y, pos.z+20 );
camera.lookAt(pos);
// new THREE.TrackballControls
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.dynamicDampingFactor = 0.5;
controls.target.set( pos.x, pos.y, pos.z );
//new THREE.AmbientLight (soft white light)
var light = new THREE.AmbientLight( 0x404040 );
light.name = 'ambientLight';
scene3d.add( light );
//new THREE.PointLight ( white light )
var pointLight = new THREE.PointLight( 0xffffff, 0.8, 0 );
camera.add( pointLight );
render();
}
function animate() {
requestId = window.requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
var camera = scene3d.getObjectByName( 'camera' );
renderer.render( scene3d, camera );
}
};
initScene();
解决方案
推荐阅读
- linux - 嵌入式 Linux:当标准输出定向到文件或 FIFO 时没有输出
- python - Prefect:代理人和执行人的关系?
- reactjs - 将 split.js 与 React 组件一起使用
- php - PHP MySQL检测是否同一个用户已经登录
- jquery - Angular 找不到模块?
- aws-api-gateway - AWS API Gateway 开发人员门户显示单个阶段的两个链接
- tinymce-5 - 在 TinyMCE 编辑器中处理格式化命令
- python - Assigning Values Depending on a Condition
- extjs - ExtJs 3.4 在 xtype 中显示错误文本字段:'textfield' (MODx)
- ios - 如何在 sprite kit 中引用多个同名的 sprite?