我只是在three.js中尝试一些闪电,遇到了一个问题,而我似乎是唯一的问题。
设置很简单,两个PointLight,一个PlaneGeometry和一个BoxGeometry。
"use strict";
var scale = 0.8;
var w = parseInt('' + Math.floor(innerWidth * scale));
var h = parseInt('' + Math.floor(innerHeight * scale));
var camera = new THREE.PerspectiveCamera(
我正在使用以下代码开始学习three.js。这段代码应该在黑色容器中显示一个红色的球体,但它不适合我。这里有熟悉three.js的人指出代码的错误之处吗?
// Set the scene size.
const WIDTH = 400;
const HEIGHT = 300;
// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;
// Get the DOM element to attach to
当我尝试在arrayBufferGeometry上查看带有线框的网格材质时,其中的vetexColors设置为THREE.vertexColors;光照仅对1个随机面起作用。当我切换到MeshBasicmaterial时,我得到了所需的行为。将wireframe设置为false时,phong材质看起来很好,并且会被照亮:
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('color', new THREE.B
我试着让我的3d模型看起来更“好”一点--我指的是看起来不那么参差不齐的边缘,看起来更逼真的阴影等等。
目前,我正在使用OBJ文件进行测试。我用来加载和显示文件的代码如下:
function LoadOBJMTL(file) {
var objObject = new THREE.Object3D;
var loader = new THREE.OBJMTLLoader();
var objfile = file + ".obj";
var mtlfile = file + ".mtl";
loader.load(objfile, mtlfile, func
我遇到了一个问题,我用TextureLoader加载的纹理在纹理中造成了一些撕裂类型的错误。
这是我为该材料使用的代码:
var textureName = "Melamine-wood-001";
var textureUrl = "textures/wood01/"+textureName+"/";
var loadedTextureName = textureUrl + textureName;
var textureExtention = ".png";
var textureWrappingAmount = 5;
所以我正在尝试制作一个简单的太阳系,我正在尝试弄清楚如何使太阳成为光源,并在其上添加一张图像的地图,使其看起来像太阳。我的代码使它成为光源,但我看不到太阳,它只是一个黑色的圆圈。有什么可以帮助你的想法吗? //Adding the sun
geometry1 = new THREE.SphereGeometry( 100, 32, 32 );
light = new THREE.PointLight( 0xffffff, 1, 5000 );
material1 = new THREE.MeshStandardMaterial(
我在mapbocx中有一个自定义的网格几何图形(三个js)。我正在尝试创建一个用于投射平行阴影的灯光,但我最终总是在基础平面上使用光源(这导致在平面以上的对象上没有投射阴影)。有人知道怎样才能把光源移到平面上方吗?我添加了一个助手来查看范围框,并且我想沿着下图中的z向量向上移动它。 ? //Create a WebGLRenderer and turn on shadows in the renderer
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = t
当我在THREE.BoxGeometry对象上设置一个点光源时,它看起来像这样:
var light = new THREE.PointLight (0xffffff, 1, 100);
light.position.set (10, 10, 10);
scene.add (light);
var geometry = new THREE.BoxGeometry (1, 1, 1);
var material = new THREE.MeshPhongMaterial ();
var cube = new THREE.Mesh (geometry, material);
scene.add (
我有一个从blender导出的简单的室内场景。它有一个房间,天花板上有3个球体,里面有各自的光源。每一盏灯单独工作都很好,但当我将它们全部插入场景中时,只有一盏灯工作!有时与2一起工作,但从不与他们中的3个一起工作。下面是我的灯光代码:
luz_sala1 = new THREE.PointLight(0xFFFFFF,0.5, 50.0);
luz_sala1.position = new THREE.Vector3(16.14323,2.52331,13.93375);
scene.add(luz_sala1);
luz_sala2 = new THREE.PointLight(0xFF
我有一个立方体和一个有阴影的方向光的简单场景。立方体投射和接收阴影。但是立方体右侧的阴影很奇怪。在阴影的中间,阴影变得更暗。为什么?
下面是一个例子:
代码如下:
var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;
var camera, scene;
var canvasRenderer, webglRenderer;
var container, mesh, geometry, plane;
var windowHalfX = window.innerWid
我正在处理一个项目,其中我将多个着色器应用于一个对象。基本场景是用平行光照明的,但当我向场景中添加点光源或聚光灯时,对象完全消失了。我在场景中有其他不会消失的对象,所以我只能假设它与应用的着色器和点光源有关。下面是我使用的着色器的摘录:
var shader = THREE.ShaderSkin[ "skin" ];
var uniformsUV = THREE.UniformsUtils.clone( shader.uniforms );
var textureLoader = new THREE.TextureLoader
在下面的代码中,我渲染了一些立方体,并用PointLight和AmbientLight照亮了它们。但是,当AmbientLight设置为0xffffff时,会将边的颜色更改为白色,而不考虑其指定的颜色。奇怪的是,点光源按预期工作。
我如何才能使环境光的行为像点光源,因为它不应该洗掉脸部的颜色,只是简单地照亮它们?即,将环境光设置为0xffffff将等同于在对象周围具有全强度的多个点光源。
$(function(){
var camera, scene, renderer;
var airplane;
var fuselage;
var tail;
ini
我正在做一个太阳系项目,包括行星和绕太阳运行的火箭。目前有一个主光源,代码如下 // add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
我有一些模型(STL)转向纯黑色,而其他模式得到颜色(从灯光)正确。
正如你在Screen击1和2中看到的那样,战斗机得到了不错的颜色,但是miku完全是黑色的。似乎没有光照亮她或她的行为就像被应用在黑色BasicMaterial。
这两种模型均与PhongMaterial相结合。我尝试了几个不同位置/类型/参数的组合灯,但没有工作。
我确信miku的模型是正常的。我刚从同一个网站下载了战斗机和miku,它们都是彩色显示的。我也有一些模型,在我的场景中转向纯黑色,虽然他们是正常的STL模型。
我的场景一定有一些错误。
这是我的代码:
<script>
var r
我试图删除点灯(或更好的任何光源),但我是新的ThreeJS.我尝试了babylonScene.remove(object);,但是我得到了一个“无法在未定义的情况下调用遍历”的错误,或者对此有影响的东西。如果这是建议的方法,那么很乐意发布错误。
下面的代码取自带有附加删除代码的ThreeJS示例代码。
var loader = new THREE.BabylonLoader( manager );
loader.load( data.src, function ( babylonScene ) {
babylonScene.traverse( function