0
説明を他のメッシュを縮小します。モーフはメッシュに影響しますが、シーン内の他のメッシュも縮小します。threejs - morphTargetsシーンで、私はmorphTargetとmorphTargetInfluenceを調整スライダーで簡単なボックスのメッシュを持っている問題</p> <p>の
問題をデモするために、jsfiddle（3jsのモーフターゲットから変更）の例をまとめました。このデモでは、スライダーを動かすと、赤い立方体の角が正しく変形されますが、青い立方体のサイズが間違って縮小されます。キューブメッシュは完全に無関係なので、どのようにモーフが青いキューブに影響を与えるか分かりません。
https://jsfiddle.net/djmm7vv2/
// JS code from jsfiddle
var container, stats;
var camera, scene, renderer;
var geometry, objects;
var mesh, mesh2;
init();
animate();
function init() {
// Create cameras, lights, scene, ect.
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 15000);
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
scene.fog = new THREE.Fog(0x000000, 1, 15000);
var light1 = new THREE.PointLight('white', 1);
light1.position.set(100, 100, 100);
var light2 = new THREE.PointLight('white', 1);
light2.position.set(-100, 100, 100);
scene.add(light1);
scene.add(light2);
// Create first mesh (red cube)
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({ color: 'red', morphTargets: true });
// Create 1 blend shape
for (var i = 0; i < 1; i ++) {
var vertices = [];
for (var v = 0; v < geometry.vertices.length; v ++) {
vertices.push(geometry.vertices[ v ].clone());
if (v === i) {
vertices[ vertices.length - 1 ].x *= 2;
vertices[ vertices.length - 1 ].y *= 2;
vertices[ vertices.length - 1 ].z *= 2;
}
}
geometry.morphTargets.push({ name: "target" + i, vertices: vertices });
}
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Add second mesh (blue cube)
var blue = new THREE.MeshLambertMaterial({ color: 'blue', morphTargets: true });
var box2 = new THREE.BoxGeometry(100, 100, 100);
mesh2 = new THREE.Mesh(box2, blue);
scene.add(mesh2);
mesh2.position.x = 150
// Create simple GUI slider to change morph influence on mesh (red cube)
var params = {
influence1: 0,
};
var gui = new dat.GUI();
var folder = gui.addFolder('Morph Targets');
folder.add(params, 'influence1', 0, 1).step(0.01).onChange(function(value) { mesh.morphTargetInfluences[ 0 ] = value; });
folder.open();
// Render it all
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}