私は最初のステップとして JavaScript でコーディングし、Three.js でも遊んでいます。
私のコードでは、この関数を作成しました:
var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {
uniforms = {
color: {
type: "c",
value: new THREE.Color(0x000000),
},
envMap: {
type: "t",
value: reflectionCube
},
fresnelBias: {
type: "f",
value: 0.1
},
fresnelScale: {
type: "f",
value: 1.0
},
fresnelPower: {
type: 'f',
value: 2.0
}
};
material = new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
wireframe: false,
side: THREE.DoubleSide,
});
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
});
そして、このレンダリング関数を作成しました:
function render() {
frame += 0.1/3;
monogram.scale.z += Math.sin(frame)/600;
TWEEN.update();
targetX = mouseX * .0005;
targetY = mouseY * .0005;
if ( monogram ) {
monogram.rotation.y += 0.05 * ( targetX - monogram.rotation.y );
monogram.rotation.x += 0.05 * ( targetY - monogram.rotation.x );
}
renderer.render( scene, camera );
}
私はすべてを見ることができ、すべてが正常に機能します。しかし、コンソールにエラーがあると表示されます: Uncaught ReferenceError: monogram is not defined.
モノグラムのグローバルスコープを作らないといけないと思います。だから私はモノグラムの前にvarを書きましたが、うまくいきませんでした。
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
私の機能の外にあり、動作しません。
何か提案はありますか?コンソールにエラーがあると表示されていても、私のアプリは動作します。コンソールにすべて問題ないと表示された方がよいと思います。