0
說明我有一個簡單的盒子具有morphTarget和調節所述morphTargetInfluence滑塊齧合。變形會影響網格，但它也會縮小場景中的其他網格。threejs - morphTargets收縮其他網格在場景中的問題</p> <p>的
我已經放在一起從下面的例子jsfiddle（從threejs變形目標修改）來演示問題。在這個演示中，移動滑塊可正確地變形紅色立方體的角落，但不正確地縮小藍色立方體的尺寸。立方體網格完全不相關，所以我沒有看到變體如何影響藍色立方體。
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);
}