Question

这是我的目标：

var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( "image.png" ) } ) );
object.position.set(2, 3, 1.5);

现在我在init（）中创建了这个对象;功能，我可以直接去对象并改变他的位置，如下：

object.position.x = 15;

现在问题是如何更改纹理的不透明度???

谢谢： - ）

Answer 1

THREE.MeshLambertMaterial扩展THREE.Material，这意味着它继承了opacity属性，因此您需要做的就是访问对象上的材质，并更改材质的不透明度：

object.materials[0].opacity = 1 + Math.sin(new Date().getTime() * .0025);//or any other value you like

另请注意，材质必须将transparent属性设置为true。

object.materials[0].transparent = true;

（感谢Drew和Dois指出这一点）

我知道three.js'引用'存在问题，但您可以查看您使用的类的源文件，并查看它具有的所有属性/方法以及是否扩展了其他内容。 / p>

Answer 2

var map = THREE.ImageUtils.loadTexture( myJSONObject[i].url );
var material = new THREE.MeshLambertMaterial( { map: map, transparent: true } );
var object = new THREE.Mesh( geometry, material );

material.opacity = 0.6;

Answer 3

我知道这个问题已经很老了但是我想从我用过的东西中得到答案，以防有人需要它。使用three.js，我使用Greensock的TweenMax / TweenLite进行补间。有了它，我能够补间任何对象的任何属性，它运行顺利。查看库here。所有我需要补间的属性是：

TweenLite.to(object, duration, properties);

其中持续时间以秒为单位，属性在对象中。这个的“问题”，特别是在使用three.js时，是为了确保你具体使用object参数。例如，根据这个问题，如果要更改网格的不透明度，则无法执行

TweenLite.to(mesh, 2, {material.opacity: 0});

相反，你需要更具体，写

TweenLite.to(mesh.material, 2, {opacity: 0});

我希望这有助于某人。补间非常棒！

Answer 4

好的，首先，我已经阅读了所有这些答案，但我不明白为什么您需要进行补间以及所有这些，而您只需执行以下操作即可。另外，我知道您的问题是如何动态更改不透明度，但我只是想将其发布给其他想知道的人：

var meshGeometry = new THREE._____Geometry(...); //Creating any mesh
var meshMaterial = new THREE.Mesh________Material({transparent: true, opacity: ...); //Transparent MUST be set to true for opacity to have affect; The opacity field can take any value ranging from 0 to 1, default is 1.
var mesh = new THREE.Mesh(meshGeometry, meshMaterial); //Combining the geometry and materials normally

您可以看到此代码的工作示例 here。

这里，threejsfundamentals 使用此代码来控制从轨道控制到透明度的所有内容：

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
 import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 25;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 4;

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

  function addLight(...pos) {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(...pos);
    scene.add(light);
  }
  addLight(-1, 2, 4);
  addLight( 1, -1, -2);

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x, y, z) {
    const material = new THREE.MeshPhongMaterial({
      color,
      opacity: 0.5,
      transparent: true,
    });

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.set(x, y, z);

    return cube;
  }

  function hsl(h, s, l) {
    return (new THREE.Color()).setHSL(h, s, l);
  }

  {
    const d = 0.8;
    makeInstance(geometry, hsl(0 / 8, 1, .5), -d, -d, -d);
    makeInstance(geometry, hsl(1 / 8, 1, .5),  d, -d, -d);
    makeInstance(geometry, hsl(2 / 8, 1, .5), -d,  d, -d);
    makeInstance(geometry, hsl(3 / 8, 1, .5),  d,  d, -d);
    makeInstance(geometry, hsl(4 / 8, 1, .5), -d, -d,  d);
    makeInstance(geometry, hsl(5 / 8, 1, .5),  d, -d,  d);
    makeInstance(geometry, hsl(6 / 8, 1, .5), -d,  d,  d);
    makeInstance(geometry, hsl(7 / 8, 1, .5),  d,  d,  d);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  let renderRequested = false;

  function render() {
    renderRequested = undefined;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);
  }
  render();

  function requestRenderIfNotRequested() {
    if (!renderRequested) {
      renderRequested = true;
      requestAnimationFrame(render);
    }
  }

  controls.addEventListener('change', requestRenderIfNotRequested);
  window.addEventListener('resize', requestRenderIfNotRequested);
}

main();

three.js - 如何动态更改对象的不透明度？

4 个答案: