<script type="text/javascript"> if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}} </script> <div id="container_three"></div> <script type="text/javascript" src="/three/Three_49.js"></script> <script type="text/javascript"> var load_target = "/three/eyes/eyes.js"; var load_texture = "/three/eyes/eyes.png"; var container; var camera, scene, renderer; var mesh; var mouseX = 0, mouseY = 0; var w = 700; var h = 600; init(); animate(); function init() { container = document.getElementById( 'container_three' ); scene = new THREE.Scene(); scene.position.y = 50; camera = new THREE.PerspectiveCamera( 50, w / h, 1, 10000 ); camera.position.set( 0, 0, 650 ); scene.add( camera ); loader = new THREE.JSONLoader(); loader.load(load_target, function ( geometry ) { var param = { map: THREE.ImageUtils.loadTexture(load_texture), overdraw: true }; mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial(param)); mesh.scale.x = 100; mesh.scale.y = 100; mesh.scale.z = 100; scene.add( mesh ); } ); var image = new Image() image.onload = function () { var texture = new THREE.Texture( this ); texture.needsUpdate = true; material = new THREE.MeshBasicMaterial({map: texture, overdraw: true}); // キューブ cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), material); cube.overdraw = true; cube.position.y = -50; scene.add(cube); }; image.src = load_texture; renderer = new THREE.CanvasRenderer( ); renderer.setSize( w, h ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - w ); mouseY = ( event.clientY - h ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.position.x += ( mouseX - camera.position.x + w/2 ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> |