三个 JS 材质未分配给网格对象

Question

这是我的玻璃材质

const glassMaterial = new THREE.MeshPhysicalMaterial( {
    // color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
    color: 0xffffff,
    metalness: 0.25,
    roughness: 0,
    transmission: 1.0,
    transparent: true, // Enable transparency
    opacity: 0.8,
});

这是我在模型中设置对象的玻璃材质的代码

loader.load('model/bentley.glb', (gltf) => {
    const carModel = gltf.scene.children[ 0 ]; 
    carModel.getObjectByName( 'glassclear_headlights' ).material = glassMaterial; 
    scene.add(carModel);
})

我面临的问题是我指定玻璃材质的对象保持平坦，就像我没有改变它一样

我注销了该对象，它显示它已更新，但它没有显示在我的画布中

Object { isObject3D: true, uuid: "eb2f4654-2800-408f-b829-7e49494fd212", name: "glassclear_headlights", type: "Object3D", parent: {…}, children: (1) […], up: {…}, position: {…}, rotation: {…}, quaternion: {…}, … }
​
animations: Array []
​
castShadow: false
​
children: Array [ {…} ]
​
frustumCulled: true
​
id: 51
​
isObject3D: true
​
layers: Object { mask: 1 }
​
material: Object { isMaterial: true, uuid: "91872851-53c4-4da9-b8d2-9540e481fcee", type: "MeshPhysicalMaterial", … }
​
matrix: Object { elements: (16) […] }
​
matrixAutoUpdate: true
​
matrixWorld: Object { elements: (16) […] }
​
matrixWorldAutoUpdate: true
​
matrixWorldNeedsUpdate: false
​
modelViewMatrix: Object { elements: (16) […] }
​
name: "glassclear_headlights"
​
normalMatrix: Object { elements: (9) […] }
​
parent: Object { isObject3D: true, uuid: "235263eb-be35-43af-b161-0ad43b80bbc5", name: "BentleyContinentalGT_2018", … }
​
position: Object { x: -0.00019347667694091797, y: 2000.848388671875, z: -623.6005249023438 }
​
quaternion: Object { isQuaternion: true, _x: 0, _y: 0, … }
​
receiveShadow: false
​
renderOrder: 0
​
rotation: Object { isEuler: true, _x: 0, _y: 0, … }
​
scale: Object { x: 1, y: 1, z: 1 }
​
type: "Object3D"
​
up: Object { x: 0, y: 1, z: 0 }
​
userData: Object { name: "glassclear_headlights" }
​
uuid: "eb2f4654-2800-408f-b829-7e49494fd212"
​
visible: true
​
<prototype>: Object { … }

这是我的完整代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

let controls;
const wheels = [];

// Get a reference to the canvas element
const canvas = document.getElementById('configurator');
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x333333 );
scene.environment = new RGBELoader().load( 'hdr/fouriesburg_mountain_lookout_2_1k.hdr' );
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
scene.fog = new THREE.Fog( 0x333333, 10, 15 );
const camera = new THREE.PerspectiveCamera(40, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
camera.position.set(0, 0.2, 5.5);

const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true  });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;


// Create a circle geometry
const circleGeometry = new THREE.CircleGeometry(3, 64); 
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
const circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
circleMesh.position.set(0, -0.75, 0); 
circleMesh.rotation.x = -Math.PI / 2; 
scene.add(circleMesh);

// materials
const bodyMaterial = new THREE.MeshPhysicalMaterial( {
    color: 0xff0000, metalness: 1.0, roughness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.03
});

const glassMaterial = new THREE.MeshPhysicalMaterial( { 
    color: 0xffffff,
    metalness: 0.25,
    roughness: 0,
    transmission: 1.0,
    transparent: true, // Enable transparency
    opacity: 0.8,
});

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );

loader.load('model/bentley.glb', (gltf) => {
    const carModel = gltf.scene.children[ 0 ]; 

    carModel.getObjectByName( 'glassclear_headlights' ).material = glassMaterial; 
carModel.getObjectByName( 'carpaint_body' ).material = bodyMaterial;

scene.add(carModel);
});
controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.1; 
controls.enablePan = false; 
controls.maxDistance = 6;
controls.minDistance = 4;
controls.maxPolarAngle = THREE.MathUtils.degToRad(90);
controls.target.set(0, 0.3, 0);
controls.rotateSpeed = 1.3;
controls.update();


const animate = () => {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
animate();

window.addEventListener('resize', () => {
    const newWidth = canvas.clientWidth;
    const newHeight = canvas.clientHeight;
    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
});

Answer 1

适合任何级别程序员的酷频道：https://t.me/itfat32 классный канал для любого уровня программиста: https://t.me/itfat32