使用JS的HTML模型旋转 [英] 3D model rotation on HTML with JS
本文介绍了使用JS的HTML模型旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
参照这个视频，我似乎无法看到立方体是应该是这里。
Referring to this video, I can't seem to see the cube which is supposed to be here.
代码导致这两个错误：
Code causes these 2 errors:
DEPRECATED: THREE.CubeGeometry is deprecated. Use THREE.BoxGeometry instead. three.min.js:634
Uncaught ReferenceError: materials is not defined
代码：
<title>My first three.js app</title>
</head>
<body>
<script src="C:\Users\123303G\Desktop\Webpage\three.min.js"></script>
<script src="C:\Users\123303G\Desktop\Webpage\TrackballControls.js"></script>
<script>
// Our Javascript will go here.
var camera, controls, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
推荐答案
问题1：
您的一种方法即 THREE.CubeGeometry 已弃用，这意味着您应将其切换为错误信息： THREE.BoxGeometry 。
Do：
Problem 1:
One of your methods namely THREE.CubeGeometry is deprecated, which means you should switch it to what the error suggests: THREE.BoxGeometry.
Do:
var geometry = new THREE.BoxGeometry(100,100,100);
而不是：
Instead of:
var geometry = new THREE.CubeGeometry(100,100,100);
问题2：
另一个错误是你有一个错字。您正在使用素材而不是素材。
Do：
Problem 2:
On the other error you have a typo. Your're using materials instead of material.
Do:
var mesh = new THREE.Mesh( geometry, material);
而不是：
Instead of:
var mesh = new THREE.Mesh( geometry, materials);
这篇关于使用JS的HTML模型旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
