123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <html>
- <head>
- <style type="text/css">
- html,
- body {
- margin: 0;
- padding: 0;
- background-color: #121212;
- }
- #demo {
- width: 66%;
- height: 66%;
- margin: 10% auto auto auto;
- display: block;
- }
- </style>
- </head>
- <body>
- <div id="demo"></div>
- <script src="./three.min.js"></script>
- <script type="text/javascript">
- var plane;
- var camera;
- var renderer;
- var velocity = { x: 0.005, y: -0.01 };
- var oscillator = 0;
- var targetObject;
- var spotLight;
- var demoContainer = document.getElementById("demo");
- window.addEventListener("resize", function (event) {
- demoContainer = document.getElementById("demo");
- camera = new THREE.PerspectiveCamera(66, demoContainer.clientWidth / demoContainer.clientHeight, 0.1, 1000);
- camera.position.z = 2.4;
- renderer.setSize(demoContainer.clientWidth, demoContainer.clientHeight);
- });
- document.addEventListener("DOMContentLoaded", function () {
- var scene = new THREE.Scene();
- scene.background = new THREE.Color(0x000000);
- camera = new THREE.PerspectiveCamera(66, demoContainer.clientWidth / demoContainer.clientHeight, 0.1, 1000);
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(demoContainer.clientWidth, demoContainer.clientHeight);
- var texture = new THREE.TextureLoader().load('./midas.jpg');
- var geometry = new THREE.PlaneGeometry(2, 2, 8, 8);
- var material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff, side: THREE.DoubleSide });
- plane = new THREE.Mesh(geometry, material);
- scene.add(plane);
- camera.position.z = 2.4;
- // var light = new THREE.AmbientLight( 0xffffff );
- // scene.add( light );
- targetObject = new THREE.Object3D();
- scene.add(targetObject);
- spotLight = new THREE.SpotLight(0xffffff);
- spotLight.position.set(0, 0, 10);
- spotLight.angle = 0.20;
- spotLight.penumbra = 1;
- spotLight.target = targetObject;
- scene.add(spotLight);
- demoContainer.appendChild(renderer.domElement);
- function animate() {
- requestAnimationFrame(animate);
- update();
- renderer.render(scene, camera);
- }
- animate();
- });
- function update() {
- oscillator += 1;
- oscillator %= 360;
- plane.position.z = Math.sin(oscillator * Math.PI / 180);
- // plane.rotation.x = Math.cos(oscillator * Math.PI / 180);
- // plane.rotation.y = Math.cos(oscillator * Math.PI / 180);
- plane.rotation.z = Math.cos(oscillator * Math.PI / 180) / 8;
- targetObject.position.x = Math.cos(oscillator * Math.PI / 180);
- targetObject.position.y = Math.sin(oscillator * Math.PI / 180);
- }
- </script>
- </body>
- </html>
|