<!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style> </head> <body> <!-- Div which will hold the Output --> <div id="WebGL-output"> </div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> // once everything is loaded, we run our Three.js stuff. function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); // create a cube var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // position the cube cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // add the cube to the scene 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); // position the sphere sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; sphere.castShadow = true; // add the sphere to the scene scene.add(sphere); var geometry = new THREE.SphereGeometry(200, 30, 30); var loader = new THREE.TextureLoader(); var texture = loader.load('/img.jpg'); // マテリアルにテクスチャーを設定 var material = new THREE.MeshStandardMaterial({ map: texture }); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = 0; mesh.position.y = 4; mesh.position.z = 20; mesh.castShadow = true; scene.add(mesh); // position and point the camera to the center of the scene camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // add spotlight for the shadows var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-20, 30, -5); spotLight.castShadow = true; scene.add(spotLight); // add the output of the renderer to the html element document.getElementById("WebGL-output").appendChild(renderer.domElement); // call the render function renderScene(); function renderScene() { // rotate the cube around its axes cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; // render using requestAnimationFrame requestAnimationFrame(renderScene); renderer.render(scene, camera); } } window.onload = init; </script> </body> </html>
上記で表示しているのですが、
なぜか、
var geometry = new THREE.SphereGeometry(200, 30, 30); var loader = new THREE.TextureLoader(); var texture = loader.load('/img.jpg'); // マテリアルにテクスチャーを設定 var material = new THREE.MeshStandardMaterial({ map: texture }); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = 0; mesh.position.y = 4; mesh.position.z = 20; mesh.castShadow = true; scene.add(mesh);
この部分のジオメトリだけ表示されません。。
特にエラーはでてないようなのですが、
なぜでしょうか・・・
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/22 14:27