http://hoshi.dimension.sc/three/
↑のようにthree.jsでjsonモデルを読み込むと、オブジェクトが二重になり、さらに点線になってしまいます。
実線のワイヤーフレームでオブジェクトは重ならない、というのが理想ですが、どのようにすれば実現できますか?
コードは以下のようになっており、ParallaxBarrierEffectを実装してからおかしくなりました。
しかし、ParallaxBarrierEffectを使用しないと、マウスを動かした時に3Dのパララックス機能がなくなってしいます。
よろしくお願いいたします。
js
1if(!Detector.webgl) Detector.addGetWebGLMessage(); 2 3// ------------------------- 4// 設定 5// ------------------------- 6//カメラサイズ 7var w = window.innerWidth; 8var h = window.innerHeight; 9var aspect = w / h; 10//カメラ上下角度 11var fov = 60; 12//これよりカメラに近い領域はレンダリングしない 13var near = 1; 14//これよりカメラから遠い領域はレンダリングしない 15var far = 1000000; 16//シーン 17var scene = new THREE.Scene(); 18//カメラ 19var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 20camera.position.set(0, 0, 300); 21//レンダラー 22var renderer = new THREE.WebGLRenderer({ 23 antialias: true 24}); 25renderer.setPixelRatio(window.devicePixelRatio); 26renderer.setSize(w, h); 27renderer.setClearColor(0xffffff, 1); 28document.body.appendChild(renderer.domElement); 29 30//ライト 31var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); 32directionalLight.position.set(0, 150, 0); 33scene.add(directionalLight); 34 35var STATS_ENABLED = false; 36var stats; 37var effect; 38var model; 39var mouseX = 0; 40var mouseY = 0; 41var windowHalfX = window.innerWidth / 2; 42var windowHalfY = window.innerHeight / 2; 43 44var loader = new THREE.JSONLoader(); 45 46init(); 47animate(); 48 49function init(){ 50 loader.load('obj.json', (geometry, materials) => { 51 var wireframe = new THREE.WireframeGeometry(geometry); 52 var lineMat= new THREE.LineBasicMaterial({ 53 //モデルの色 54 color: 0x000000 55 }); 56 var model = new THREE.LineSegments(wireframe, lineMat); 57 model.material.depthTest = false; 58 model.material.transparent = true; 59 //透過 60 model.material.opacity = 0.3; 61 //モデルの大きさ 62 model.scale.x = 100; 63 model.scale.y = 100; 64 model.scale.z = 100; 65 66 scene.add(model); 67 var rot = (function(){ 68 //回転 69 requestAnimationFrame(arguments.callee); 70 model.rotation.y += 0.005; 71 effect.render(scene, camera); 72 })(); 73 }); 74 75 var width = window.innerWidth || 2; 76 var height = window.innerHeight || 2; 77 78 effect = new THREE.ParallaxBarrierEffect(renderer); 79 effect.setSize(width, height); 80 81 if(STATS_ENABLED){ 82 stats = new Stats(); 83 container.appendChild(stats.dom); 84 } 85 86 document.addEventListener('mousemove', onDocumentMouseMove, false); 87 88 window.addEventListener('resize', onWindowResize, false); 89} 90 91function onWindowResize(){ 92 windowHalfX = window.innerWidth / 2; 93 windowHalfY = window.innerHeight / 2; 94 var w = window.innerWidth; 95 var h = window.innerHeight; 96 renderer.setSize(w, h); 97 camera.aspect = w / h; 98 camera.updateProjectionMatrix(); 99 effect.setSize(window.innerWidth, window.innerHeight); 100} 101 102function onDocumentMouseMove(event){ 103 mouseX = (event.clientX - windowHalfX) / 5; 104 mouseY = (event.clientY - windowHalfY) / 5; 105} 106 107function animate(){ 108 requestAnimationFrame(animate); 109 render(); 110} 111 112function render(){ 113 camera.position.x += (mouseX - camera.position.x) * .05; 114 camera.position.y += (- mouseY - camera.position.y) * .05; 115 camera.lookAt(scene.position); 116 effect.render(scene, camera); 117 if(STATS_ENABLED) stats.update(); 118}
html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<link rel="stylesheet" type="text/css" href="css/base.css"> 6<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 7<script type="text/javascript" src="js/three.min.js"></script> 8<script type="text/javascript" src="js/stats.min.js"></script> 9<script type="text/javascript" src="js/Detector.js"></script> 10<script type="text/javascript" src="js/geometry/WireframeGeometry.js"></script> 11<script type="text/javascript" src="js/control/TrackballControls.js"></script> 12<script type="text/javascript" src="js/effect/ParallaxBarrierEffect.js"></script> 13 14<title>TJS</title> 15</head> 16 17<body> 18<!-- <script type="text/javascript" src="js/output/outerspace.js"></script> --> 19<script type="text/javascript" src="js/output/outerspace_auto.js"></script> 20 </body> 21</html> 22
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/01/24 09:19