gpt4 book ai didi

javascript - 三个js阴影

转载 作者:行者123 更新时间:2023-12-03 07:16:51 24 4
gpt4 key购买 nike

我一直在研究 tree.js 中的场景,以帮助理解如何创建与在 3dsMax 中类似的场景。我正在尝试添加阴影。

根据我读到的内容,我应该看到地面上有一个阴影,由 lightSpot_Right 转换,而 barStool 是遮挡对象。但我不是!如果有人有任何建议,我们将不胜感激!

///webGL - Locking down the Basics
/////////////////////////////////////////////////////////////Environment Settings///////////////////////////////////////////////////////////////////////
///Renderer
var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.shadowMapEnabled = true;

document.body.appendChild(renderer.domElement);

///Camera's
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

var cubeCamera = new THREE.CubeCamera(1, 1000, 256); // parameters: near, far, resolution
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter
scene.add(cubeCamera);

camera.position.set(0, 16, 25);
camera.rotation.x += -0.32;

///Controls



///Lights

var lightSpot_Right = new THREE.SpotLight(0xffffff);
lightSpot_Right.position.set(50, 50, 0);
lightSpot_Right.castShadow = true;
lightSpot_Right.shadowMapWidth = 1024;
lightSpot_Right.shadowMapHeight = 1024;
lightSpot_Right.shadowCameraNear = 500;
lightSpot_Right.shadowCameraFar = 4000;
lightSpot_Right.shadowCameraFov = 30;
scene.add(lightSpot_Right);

var lightDirect_Left = new THREE.DirectionalLight(0xffffff, 0.25);
lightDirect_Left.position.set(-1, 0, 0);
scene.add(lightDirect_Left);

//var lightAmb = new THREE.AmbientLight(0x262626); // soft white light
//scene.add(lightAmb);

///Loaders
var loadTexture = new THREE.TextureLoader();
var loader = new THREE.JSONLoader();

///skyBox
var imagePrefix = "textures/";
var directions = ["skyboxRight", "skyboxLeft", "skyboxTop", "skyboxBottom", "skyboxFront", "skyboxBack"];
var imageSuffix = ".jpg";

var skyMaterialArray = [];
for (var i = 0; i < 6; i++)
skyMaterialArray.push(new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load(imagePrefix + directions[i] + imageSuffix),
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial(skyMaterialArray);


var skyGeometry = new THREE.CubeGeometry(500, 500, 500);
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial);
scene.add(skyBox);

var groundPlaneMat = new THREE.MeshPhongMaterial({


})

////////////////////////////////////////////////////////Object Settings//////////////////////////////////////////////////////////////////

//Textures
var seatTexture = loadTexture.load("textures/Maharam_Mister_Notice_Diffuse.jpg");

var conceteDiffuse = loadTexture.load("textures/Contrete_Diffuse.jpg");
var conceteNormal = loadTexture.load("textures/Contrete_Normal.jpg");
var conceteSpecular = loadTexture.load("textures/Contrete_Specular.jpg");

///Materials
var seatMaterial = new THREE.MeshLambertMaterial({
map: seatTexture,
side: THREE.doubleside
});
var frameMaterial = new THREE.MeshPhongMaterial({
envMap: cubeCamera.renderTarget,
color: 0xcccccc

});
var frameHardwareMat = new THREE.MeshPhongMaterial({
color: 0x000000
});
var feetMat = new THREE.MeshPhongMaterial({
color: 0x050505,
shininess: 99
});

var sphereMat = new THREE.MeshPhongMaterial({
envMap: cubeCamera.renderTarget

});

var groundMat = new THREE.MeshPhongMaterial({
map: conceteDiffuse,
specularMap: conceteSpecular
});

///Geometry and Meshes
var barStool = new THREE.Object3D();
scene.add(barStool);
barStool.castShadow = true;

var seatMesh;
loader.load("models/stoolSeat.js", function (geometry, material) {
seatMesh = new THREE.Mesh(geometry, seatMaterial);
seatMesh.scale.set(.5, .5, .5);
barStool.add(seatMesh);

});

var frameMesh;
loader.load("models/stoolFrame.js", function (geometry, material) {
frameMesh = new THREE.Mesh(geometry, frameMaterial);
frameMesh.scale.set(.5, .5, .5);
barStool.add(frameMesh);

});

var frameFeetMesh;
loader.load("models/stoolFeet.js", function (geometry, material) {
frameFeetMesh = new THREE.Mesh(geometry, feetMat);
frameFeetMesh.scale.set(.5, .5, .5);
barStool.add(frameFeetMesh);
});

var frameHardwareMesh;
loader.load("models/stoolHardware.js", function (geomtry, material) {
frameHardwareMesh = new THREE.Mesh(geomtry, frameHardwareMat);
frameHardwareMesh.scale.set(.5, .5, .5);
barStool.add(frameHardwareMesh);
});


var sphereGeo = new THREE.SphereGeometry(2.5, 50, 50);
var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
scene.add(sphereMesh);

sphereMesh.position.set(-10, 5, 0);

var groundGeo = new THREE.PlaneGeometry(100, 50, 1);
var groundMesh = new THREE.Mesh(groundGeo, groundMat);
scene.add(groundMesh);

groundMesh.rotation.x = -90 * Math.PI / 180;
groundMesh.receiveShadow = true;


///Render Scene

var render = function () {

requestAnimationFrame(render);
barStool.rotation.y += 0.01;

sphereMesh.visible = false;
cubeCamera.position.copy(sphereMesh.position);
cubeCamera.updateCubeMap(renderer, scene);
sphereMesh.visible = true;
/*
frameMesh.visible = false;
cubeCamera.position.copy(frameMesh.position);
cubeCamera.updateCubeMap(renderer, scene);
frameMesh.visible = true;
*/
renderer.render(scene, camera);
};

render();

最佳答案

我明白了!我应该分配 .castShadow = true;到网格对象,而不是将其设置为 barStool,它是一个空的 Object3D,它是包含凳子的网格的父级。

关于javascript - 三个js阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36390238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com