表示した3Dモデルをマウスであらゆる方向から見られるようにするためOrbitControlsの実装をしたいです。
three.jsの公式例のwebgl_loader_ply.htmlを参考に次のような3Dモデルを表示するコードを作成しました。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <title>three.js webgl - PLY</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 7 <link type="text/css" rel="stylesheet" href="main.css"> 8 </head> 9 <body> 10 <script type="module"> 11 12 import * as THREE from './three.js-master/build/three.module.js'; 13 //import Stats from './three.js-master/examples/jsm/libs/stats.module.js'; 14 //import * as THREE from './three.js-master/examples/jsm/controls/OrbitControls.js'; 15 import { PLYLoader } from './three.js-master/examples/jsm/loaders/PlyLoader.js'; 16 17 18 var container, stats; 19 20 var camera, cameraTarget, scene, renderer; 21 22 init(); 23 animate(); 24 25 function init() { 26 27 container = document.createElement( 'div' ); 28 document.body.appendChild( container ); 29 30 camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 ); 31 camera.position.set( 3, 0.15, 3 ); 32 33 cameraTarget = new THREE.Vector3( 0, - 0.1, 0 ); 34 35 scene = new THREE.Scene(); 36 scene.background = new THREE.Color( 0x72645b ); 37 scene.fog = new THREE.Fog( 0x72645b, 2, 15 ); 38 39 40 // PLY file 41 var loader = new PLYLoader(); 42 loader.load('./models/HOGEHOGE.ply', function ( geometry ) { 43 geometry.computeVertexNormals(); 44 var material = new THREE.MeshBasicMaterial( { vertexColors:true, wireframe: true} ); 45 var mesh = new THREE.Mesh( geometry, material ); 46 mesh.scale.multiplyScalar( 0.01 ); 47 mesh.castShadow = true; 48 mesh.receiveShadow = true; 49 scene.add( mesh ); 50 } ); 51 52 53 // Lights 54 55 scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) ); 56 57 addShadowedLight( 1, 1, 1, 0xffffff, 1.35 ); 58 addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 ); 59 60 // renderer 61 62 renderer = new THREE.WebGLRenderer( { antialias: true } ); 63 renderer.setPixelRatio( window.devicePixelRatio ); 64 renderer.setSize( window.innerWidth, window.innerHeight ); 65 renderer.outputEncoding = THREE.sRGBEncoding; 66 67 renderer.shadowMap.enabled = true; 68 69 container.appendChild( renderer.domElement ); 70 71 72 // resize 73 74 window.addEventListener( 'resize', onWindowResize, false ); 75 76 } 77 78 function addShadowedLight( x, y, z, color, intensity ) { 79 80 var directionalLight = new THREE.DirectionalLight( color, intensity ); 81 directionalLight.position.set( x, y, z ); 82 scene.add( directionalLight ); 83 84 directionalLight.castShadow = true; 85 86 var d = 1; 87 directionalLight.shadow.camera.left = - d; 88 directionalLight.shadow.camera.right = d; 89 directionalLight.shadow.camera.top = d; 90 directionalLight.shadow.camera.bottom = - d; 91 92 directionalLight.shadow.camera.near = 1; 93 directionalLight.shadow.camera.far = 4; 94 95 directionalLight.shadow.mapSize.width = 1024; 96 directionalLight.shadow.mapSize.height = 1024; 97 98 directionalLight.shadow.bias = - 0.001; 99 100 } 101 102 function onWindowResize() { 103 104 camera.aspect = window.innerWidth / window.innerHeight; 105 camera.updateProjectionMatrix(); 106 107 renderer.setSize( window.innerWidth, window.innerHeight ); 108 109 } 110 111 function animate() { 112 113 requestAnimationFrame( animate ); 114 115 render(); 116 stats.update(); 117 118 } 119 120 function render() { 121 122 var timer = Date.now() * 0.0003; 123 124 camera.position.x = Math.sin( timer ) * 2.5; 125 camera.position.z = Math.cos( timer ) * 2.5; 126 127 camera.lookAt( cameraTarget ); 128 129 renderer.render( scene, camera ); 130 131 } 132 </script> 133 </body> 134</html> 135
ここにOrbitControlsを追加しようとしたのですが、名前が「THREE」以外にしても実装できず、実装の仕方がわかりませんでした。(このプログラムはゆっくりと回転するだけです)
また、こちらのサイトを参考にしてOrbitControlsの導入を試みたのですが下記のコードではモデルすら表示することができませんでした。(サイズ指定したウィンドウは表示されます)
html
1 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.module.js"></script> 7 <script src="three.js-master/examples/jsm/controls/OrbitControls.js"></script> 8 <script src="three.js-master/examples/jsm/loaders/PlyLoader.js"></script> 9 10 <script> 11 // ページの読み込みを待つ 12 window.addEventListener('load', init); 13 14 function init() { 15 // サイズを指定 16 const width = 960; 17 const height = 540; 18 19 // レンダラーを作成 20 const renderer = new THREE.WebGLRenderer({ 21 canvas: document.querySelector('#myCanvas') 22 }); 23 renderer.setPixelRatio(window.devicePixelRatio); 24 renderer.setSize(width, height); 25 26 // シーンを作成 27 const scene = new THREE.Scene(); 28 29 // カメラを作成 30 const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000 ); 31 // カメラの初期座標を設定 32 camera.position.set(0, 10, 10); 33 34 // カメラコントローラーを作成 35 const controls = new THREE.OrbitControls(camera); 36 controls.target.set(0, 3, 0); 37 controls.update(); 38 39 // 平行光源を作成 40 const directionalLight = new THREE.DirectionalLight(0xffffff); 41 directionalLight.position.set(1, 1, 1); 42 scene.add(directionalLight); 43 // 環境光を追加 44 const ambientLight = new THREE.AmbientLight(0x333333); 45 scene.add(ambientLight); 46 47 // PLY file V2 48 var loader = new PLYLoader(); 49 loader.load('./models/HOGEHOGE.ply', function ( geometry ) { 50 geometry.computeVertexNormals(); 51 var material = new THREE.MeshBasicMaterial( { vertexColors:true, wireframe: true} ); 52 var mesh = new THREE.Mesh( geometry, material ); 53 mesh.scale.multiplyScalar( 0.01 ); 54 mesh.castShadow = true; 55 mesh.receiveShadow = true; 56 scene.add( mesh ); 57 } ); 58 59 tick(); 60 61 // 毎フレーム時に実行されるループイベントです 62 function tick() { 63 // レンダリング 64 renderer.render(scene, camera); 65 requestAnimationFrame(tick); 66 } 67 } 68 </script> 69 </head> 70 <body> 71 <canvas id="myCanvas"></canvas> 72 </body> 73 </html>
ご教授いただけますと幸いです。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2020/11/06 08:28