我正在为一个网站创建一个页面,该页面将在3D模型旁边显示文本,因此我一直在探索threejs作为将我带到那里的一种方式。 我一直在努力解决此错误:
Uncaught TypeError: Cannot read property 'update' of undefined
它指出了我的js中的此函数的问题。更新即将结束。我没有在线发布该页面,但是尽管出现了该错误,但它似乎在本地运行良好。这里的主要菜鸟,所以对您有帮助。谢谢。
//DIV3
function RenderDiv3(canvas) {
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById(canvas), antialias: true }),
clock = new THREE.Clock(),
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.25, 2000 ),
//controls = new THREE.OrbitControls( camera ),
scene = new THREE.Scene(),
light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
geometry = new THREE.BoxGeometry(100,100,100,10,10,10),
material = new THREE.PointsMaterial({ size: 6, color: 0x000000 });// this material will alow color, the parameter sets the solor of the object
var mixer ;
//Renderer
renderer.setClearColor(0xc9d5e8);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
//CAMERA
camera.position.set( 0, 0, 10 );
//LIGHT
light.position.set( 0, 1, 0 );
scene.add( light );
//MODEL
const loader = new THREE.GLTFLoader();
loader.load( '../models/gltf/Face_02.gltf', function( gltf ){
scene.add( gltf.scene );
mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play();
} );
//WINDOW RESIZE FUNCTION
window.addEventListener("resize", onWindowResize);
function onWindowResize() {
camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
};
//Mesh
let mesh = new THREE.Points(geometry, material);
mesh.position.set(0, 0, 100);
scene.add(mesh);
//Animate
renderer.render( scene, camera );
window.requestAnimationFrame( animate );
function animate() {
window.requestAnimationFrame( animate );
render();
};
function render(){
var delta = clock.getDelta();
mixer.update(delta);
renderer.render( scene, camera );
};
};