質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

Q&A

解決済

1回答

5525閲覧

threejs ジオメトリが表示されない

cheche0830

総合スコア187

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

0グッド

0クリップ

投稿2018/07/20 18:29

<!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);

この部分のジオメトリだけ表示されません。。
特にエラーはでてないようなのですが、
なぜでしょうか・・・

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

恐らく表示されていない(ように見える)のは球体のサイズが大きすぎる為だと思います。
例えるなら半径200mのドームの中にいるイメージでしょうか。
試しに球体のサイズを小さくするかカメラを遠ざけてみて下さい。

以下は、球体のサイズを1/100にした例になります。

js

1//var geometry = new THREE.SphereGeometry(200, 30, 30); // 半径200m 2var geometry = new THREE.SphereGeometry(2, 30, 30); // 半径2m

また、メッシュがどこにいるか分からなくなった場合は、以下のAxesHelperを使用すると位置を表示してくれるので便利です。

js

1var axis = new THREE.AxesHelper(200); 2mesh.add(axis);

以下はAxesHelperの使用例です。
http://runstant.com/cx20/projects/7b33126e
AxesHelper使用例

投稿2018/07/22 12:43

cx20

総合スコア4632

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheche0830

2018/07/22 14:27

こちらもありがとうございます!!! なんと・・・お恥ずかしい・・・ 大変助かりました!!! threejs、難しいですね・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問