是否有一个插件可以向Three.js自学项目添加旋转功能? [英] Is there a plugin to add rotation to three.js self-learning project?
问题描述
我开始使用three.js,想知道是否有一个简单的插件来添加跟踪球功能,以便可以看到我在代码中所做的更改如何影响简单对象的底层".
I'm starting to play with three.js and was wondering if there's a simple plugin to add the trackball functionality so I can see how the changes I'm making in code is affecting the "underside" of the simple object.
我试图遵循:
http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html
但是我收到了很多EventDispatcher错误.
But I'm getting a lot of EventDispatcher errors.
尝试一下,我是说:
- 添加了"TrackballControls.js"
- 添加了"Detector.js"
-
添加了以下代码:
- added "TrackballControls.js"
- added "Detector.js"
added this bit of code:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
我确实注意到示例中使用的three.js与处的那个不同(但不确定是否重要):
I did notice that the three.js used in the example is different than the one at (but not sure if it matters):
http://cdnjs.cloudflare.com/ajax/libs/three.js/r53/three.min.js
在我刚开始的时候,任何建议都会非常有帮助.
Any suggestions would be extremely helpful as I'm just starting out.
谢谢您的时间!
更新: 我尝试从此处使用最新版本的Three.js:
Update: I tried using the latest build of Three.js from here:
https://github.com/mrdoob/three. js/blob/master/build/three.js
我找不到TrackballControls.js和Detector.js的正式版本,所以我使用了以下版本:
I couldn't find official builds of TrackballControls.js and Detector.js so I used these versions:
http://threejsdoc. appspot.com/doc/three.js/src.source/extras/controls/TrackballControls.js.html
http://mrdoob.github.com/three.js/examples/js/Detector.js
这是我无法使用的代码(它是 http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html 并尝试将对象变成环形/环形):
Here's the code that I could not get to work (it's a combination of http://www.aerotwist.com/tutorials/getting-started-with-three-js/ and http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html and trying to make the object into a ring/torus):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Getting Started with Three.js | Aerotwist</title>
<meta name="description" content="The home of Creative Coder and developer Paul Lewis. Tutorial, experiments and considered opinions found here.">
<meta name="author" content="Paul Lewis">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Three.js"></script>
<script src="TrackballControls.js"></script>
<script src="Detector.js"></script>
</head>
<style>
#container {
background: #000;
width: 400px;
height: 300px;
}
</style>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
renderer.render( scene, camera );
}
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
// TrackBall code from http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html
var controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
//controls.addEventListener( 'change', render ); // this was how it used to be at: http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html
controls.domElement.addEventListener( 'change', render ); // I changed this to fix error message: "controls.addEventListener is not a function"
// --------------------------
// add the camera to the scene
scene.add(camera);
// the camera starts at 0,0,0
// so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// ------------------------
// create the sphere's material
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});
// -------------------------------
// ################ try torus
var centerpiece = new THREE.TorusGeometry();
var sphere = new THREE.Mesh(
centerpiece,
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
// ---------------------------
// create a point light
var pointLight =
new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
// -------------------------
// draw!
renderer.render(scene, camera);
</script>
每当我单击页面上的任意位置时,都会显示以下错误消息:
Whenever I click anywhere on the page I get this error message:
_eye.copy(...).subSelf is not a function
有什么想法吗?
谢谢您的时间!
推荐答案
请确保您使用的是同一版本的所有文件.理想情况是从最新开始.
Make sure you're using all the files from the same version. Ideally from the latest.
这篇关于是否有一个插件可以向Three.js自学项目添加旋转功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!