three.jsはじめてみました
なんだかんだでJSとPythonとあとHTML位が楽。
Processingなんてなかった。
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
- 作者: Jos Dirksen,あんどうやすし
- 出版社/メーカー: オライリージャパン
- 発売日: 2016/07/23
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
早速写経した。つまづいたところは
- オブジェクト作るvar stats = new initStats();
ていうところ
- function initStats(){}
内にもvar stats = new Stats();
同じ文章があるところ
ここでつまづいた。あれ?変数同じでええんかいってなったけどスコープ違うからいいのね。
後は本の中で当たり前にFunctionをネストしてた。関数のネストもはじめてなんだよなぁ
<!DOCTYPE html> <html> <head> <title>example 01.01</title> <script type="text/javascript" src="./libs/three.js"></script> <script type="text/javascript" src = "./libs/stats.js"></script> <style> body{ margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <div id="WebGL-output"> </div> <script type="text/javascript"> function init(){ var stats = initStats(); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000); var step = 0; var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth,window.innerHeight); renderer.shadowMap.enabled = true; var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-20,30,-5); spotLight.castShadow = true; scene.add(spotLight); var axes = new THREE.AxisHelper(20); scene.add(axes); var planeGeometry = new THREE.PlaneGeometry(60,20); var planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x = -0.5*Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; plane.receiveShadow = true; scene.add(plane); var cubeGeometry = new THREE.BoxGeometry(4,4,4); var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000}); var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; cube.castShadow = true; scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20); var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff}); var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; sphere.castShadow = true; scene.add(sphere); camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); document.getElementById("WebGL-output").appendChild(renderer.domElement); renderScene(); function renderScene(){ stats.update() cube.rotation.x +=0.02; cube.rotation.y +=0.02; cube.rotation.z +=0.02; step += 0.04; sphere.position.x = 20+(10*(Math.cos(step))); sphere.position.y = 2+(10*Math.abs(Math.sin(step))); requestAnimationFrame(renderScene); renderer.render(scene,camera); } function initStats(){ var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.lft = '0px'; stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } window.onload =init; </script> </body> </html>
面妖なスコープ・・