解決させたいことは、.objを自動でrotationをさせたいのですが、エラーが出てしまいます。
マウスのドラッグでカメラの位置などは変更できますが、、
他のジオメトリは、自動で再生することが出来ているのですが、ご教授いただけますでしょうか。
'use strict'; // ページの読み込みを待つ window.addEventListener('load', init); function init() { // サイズを指定 var width = window.innerWidth; var height = window.innerHeight; var rot = 180; // 角度 var mouseX = 0; // マウス座標 var mouseZ = 0; // マウス座標 // レンダラーを作成 var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas'), alpha: false }); renderer.setClearColor(0x000000, 0.4); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); // シーンを作成 var scene = new THREE.Scene(); // カメラを作成 var camera = new THREE.PerspectiveCamera(4000, width / height); // カメラの初期座標を設定 camera.position.set(0, 0, 0); /* var axis = new THREE.AxisHelper(1000) axis.position.set(0, 0, 0) scene.add(axis) */ // 平行光源を作成 var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8); directionalLight.position.set(90, 90, 90); scene.add(directionalLight); var ambient = new THREE.AmbientLight(0xcccccc, 0.2); scene.add(ambient); // マテリアルを作成 var material = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('assets/images/mask.jpg'), side: THREE.DoubleSide, transparent: true, opacity: 0.5 }); // 球体の形状を作成します var geometry = new THREE.BoxGeometry(200, 200, 200); // 形状とマテリアルからメッシュを作成します var earthMesh = new THREE.Mesh(geometry, material); // シーンにメッシュを追加します scene.add(earthMesh); // 星屑を作成します (カメラの動きをわかりやすくするため) createStarField(); function createStarField() { // 形状データを作成 var geometry3 = new THREE.Geometry(); for (var i = 0; i < 10000; i++) { geometry3.vertices.push(new THREE.Vector3(3000 * (Math.random() - 0.5), 3000 * (Math.random() - 0.5), 3000 * (Math.random() - 0.5))); } // マテリアルを作成 var material3 = new THREE.PointsMaterial({ size: 1, color: 0xFFFFFF, transparent: true, opacity: 1, side: THREE.DoubleSide }); // 物体を作成 var mesh = new THREE.Points(geometry3, material3); scene.add(mesh); } var geometry2 = new THREE.BoxGeometry(150, 150, 150); var material2 = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.5, side: THREE.DoubleSide }); var box = new THREE.Mesh(geometry2, material2); scene.add(box); // texture var manager = new THREE.LoadingManager(); manager.onProgress = function (item, loaded, total) { console.log(item, loaded, total); }; var textureLoader2 = new THREE.TextureLoader(manager); var texture2 = textureLoader2.load('assets/images/mask.jpg'); texture2.side = THREE.DoubleSide; // model var onProgress = function onProgress(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 1000; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; var onError = function onError(xhr) {}; var loader2 = new THREE.OBJLoader(manager); loader2.load('assets/images/logo.obj', function (object) { object.traverse(function (child) { if (child instanceof THREE.Mesh) { child.material.map = texture2; child.material.side = THREE.DoubleSide; } }); object.position.y = 50; scene.add(object); object.rotation.set(Math.PI / 50, 50, 0); }, onProgress, onError); // マウス座標はマウスが動いた時のみ取得できる document.addEventListener('mousemove', function (event) { mouseX = event.pageX; }); var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enablePan = true; controls.enableZoom = true; controls.minDistance = 0.0; controls.maxDistance = 800.0; controls.target.set(0, 0, 0); controls.maxPolarAngle = Math.PI * 0.5; // 0.5なら下からのぞき込めなくなる tick(); // 毎フレーム時に実行されるループイベントです function tick() { // マウスの位置に応じて角度を設定 // マウスのX座標がステージの幅の何%の位置にあるか調べてそれを360度で乗算する var targetRot = mouseX / window.innerWidth * 360; // イージングの公式を用いて滑らかにする // 値 += (目標値 - 現在の値) * 減速値 rot += (targetRot - rot) * 0.01; // ラジアンに変換する var radian = rot * Math.PI / 180; // 角度に応じてカメラの位置を設定 camera.position.x = 1000 * Math.sin(radian); camera.position.y = 1000 * Math.cos(radian); camera.position.z = 1000 * Math.cos(radian); // 原点方向を見つめる camera.lookAt(new THREE.Vector3(10, 10, 10)); // 地球は常に回転させておく earthMesh.rotation.x += 0.01; box.rotation.y += 0.01; var radian2 = rot * Math.PI / 180; // 角度に応じてカメラの位置を設定 camera.position.x = 1000 * Math.sin(radian2); camera.position.y = 1000 * Math.sin(radian2); camera.position.z = 1000 * Math.cos(radian2); controls.update(); // レンダリング renderer.render(scene, camera); requestAnimationFrame(tick); } }
どんなエラーが発生するのかを記述してください
コンソールをみたところ、エラーはでておりませんでしあが、function init() {}内にobject.rotation.y += 0.01を記述した場合、無視されております。