小编gma*_*man的帖子

以下代码在Chrome中失败,Safari在Firefox中运行良好

"use strict";
document.body.style = "background-color: green;";

<p>background should be green</p>

删除"使用严格",它的工作原理.

这是Chrome和Safari中的错误还是Firefox中的错误？MDN表示设置style有效.

如果我创建一个带有2个子项和列流的flexbox,并将第二个子项设置为第二个子项,flex-grow 1则展开以填充flexbox.这有效

(ps:不想用safari支持来混淆这个例子,所以使用Chrome或Firefox)

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">bottom (blue)</div>
</div>
  

但是,如果我然后将一个孩子#inside放在里面#bottom并将其高度设置为100%,即使Flexbox已拉伸,它也不会增加其高度以匹配#bottom.

添加了CSS

#inside {
  background-color: green;
  height: 100%;
}

HTML

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside</div>  <!- added -> …

我想要一种材料:

• 纹理
• 没有接收灯
• 接收阴影

我尝试使用以下库材料:

• MeshBasicMaterial:不支持阴影
• MeshLamberMaterial:如果禁用灯光(material.lights = false),它也会禁用阴影
• ShadowMaterial:不支持纹理

是自定义ShaderMaterial实现它的唯一途径吗？

在下面的代码中，我使用正交相机和映射为平面几何体的纹理的画布来设置一个非常基本的场景。

我将一些白色文本放在透明画布上，如果我使用 canvas.toDataURL()，则不会出现效果。

然而，当我将画布内容作为纹理应用到材质上并在超标准的 2d 场景中渲染它时，一条黑线勾勒出我的文本，这可能是奇怪的抗锯齿现象发生的结果。在这个例子中，渲染器清晰的颜色、材质和文字都是纯白色的。

这是一个屏幕截图：

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: …

我有下一个问题。我有一个用 Three.js +orbitControls.js 制作的用于相机处理的项目。有一个场景，上面有一个简单的立方体和相机。我有一个来自orbitControls.js 的相机，当我做鼠标滚轮时，它会朝屏幕中心放大/缩小（默认行为）。我需要修改它，以便将放大/缩小到 3D 对象上的鼠标位置，就像在 3D 编辑器中一样，如 3D Max、搅拌机。

我确实理解逻辑应该是这样的：从您开始缩放的位置获取鼠标的位置，实际上您想要放大的位置，存储该值，放大并获取新的鼠标位置，找到之间的偏移量第一个鼠标位置和当前，并在放大期间将相机移动到该偏移量。但是，它无法正常工作。大多数情况下，我认为这可能是我的相机坐标的问题，以及我想放大的位置。

这是我的代码：

 window.onload = function() {

        var renderer = new THREE.WebGLRenderer();
        var width = 640;
        var height = 480;
        renderer.setSize( width, height );
        var div = document.getElementById('canvas')
        div.appendChild( renderer.domElement );

        var scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(
            70,
            width / height,
            0.1,
            10000
        );
        camera.position.set( 0, 10, 10 );
        camera.lookAt( scene.position );

        control = new THREE.OrbitControls( camera );

        var geometry = new THREE.CubeGeometry( 5, 5, 5 ); …

为了避免XY问题,让我解释一下我来自哪里.我想使用THREE.js绘制使用相同时间轴堆叠在一起的大量波形.波形只是THREE.Line和我正在通过修改正交相机的视图边界来实现这些波形的缩放/平移/缩放.

我最初尝试完成这项工作,这使我创建了多个具有固定高度的画布元素,彼此堆叠在一起,并将THREE.WebGLRenderer附加到每个画布上.这非常有效,直到我尝试将其缩放到15个左右的波形,其中THREE.js给了我一个警告"太多活动的webgl上下文",并开始删除旧的上下文.

我觉得这是一个不错的做法,考虑到这里应用的技术相同:http://threejs.org/examples/#webgl_multiple_canvases_grid

在此示例中,创建了4个WebGLRenderer,每个画布一个.

那么,是否有可能以某种方式覆盖此警告,并创建无限数量的canvas元素,每个元素都有自己的渲染器？

在旁边:

我已经考虑过使用一个场景并在其中相应地定位波形,并使用多个摄像机,其方法类似于http://threejs.org/examples/#webgl_multiple_views.

问题有两方面:

(1)我失去了在每个波形的基础上进行dom操作并轻松连接键和鼠标监听器的能力.

(2)这个解决方案似乎也没有扩展.一旦渲染器的高度超过6000px高度,它就会开始进入某种类型的腐败状态,并且部分场景不会出现,其余内容会出现拉伸以进行补偿.

感谢任何能提供帮助的人!

我有一个带有纹理地板平面的three.js场景,需要一个非常特定的视角来与静态2D叠加层对齐

我的问题是,我越多地增加相机FOV以获得我需要的视角,前景延伸越多,我不希望这样.我似乎需要一个非常高的FOV(~120-150)来使纹理跟随墙壁,这是如此之高,以至于相机正在将物体定位在它后面.我需要将相机几乎移动到场景的中心,以显示整个楼层,这只是感觉不对.如何调整此场景,以便在没有失真的情况下获得正确的视角？

实例:http://warriorhut.net/testing/shapes/backend/room/view.basic.php

相关的相机设置是:

var WIDTH = 1024;
var HEIGHT = 683;
var FOV = 140; // Increases perspective as it goes higher but also distortion

camera =  new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, .1, 3000);

camera.position.x = 0;
camera.position.y = 200;
camera.position.z = 0;  
//camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3( 0, 100, -400 )); // look at the back of the room
camera.updateProjectionMatrix();

我正在使用已应用颜色的 MeshBasicMaterial。

var material = new THREE.MeshBasicMaterial({color: myColor});

有时我需要向材质添加纹理

material.map = new THREE.ImageUtils.loadTexture(...);

这工作正常，但材质的颜色正在给纹理着色。

我意识到我可以将材质的颜色更改为白色以消除这种着色，但找不到删除材质颜色或更改颜色和纹理混合方式的方法 - 这可能吗？我试图避免创建新材料并尽可能避免更换。

Lee Stemkoski 的示例中演示了 - 将地图更改为“草”，然后更改材质颜色

http://trijs.org/docs/scenes/material-browser.html#MeshBasicMaterial

我有一个带有两个collada物体和一个定向灯的场景.第一个collada几乎是一个平面,第二个是由多个盒子组成.

看起来当渲染场景时,一些"侧面"阴影确实被剥离,尽管在地面上投射的阴影很好地渲染.

.

当我正在寻找答案时,我发现它可能是我的collada的一个问题,所以我在场景中添加了一个基本的立方体(最重要的一个),但似乎它有同样的问题.

有没有人有提示或已经知道这个问题？

我正在使用最后三个.js版本atm(r71),在Google Chrome和Mozilla Firefox(MacOS)上测试过.我已经尝试调整定向灯的所有阴影*属性,除了与shadowCascade(我不使用)相关的属性.我还测试了调整与阴影相关的渲染器的属性.

这是我的灯光设置:

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.target.position = THREE.Vector3(0, 0, 0);
directionalLight.position.set( 250, 500, 250 );
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 100;
directionalLight.shadowCameraFar = 1000;
directionalLight.shadowMapWidth = 2048;
directionalLight.shadowMapHeight = 2048;
directionalLight.shadowBias = 0.0001;
directionalLight.shadowDarkness = 0.5;
directionalLight.shadowCameraLeft = -300;
directionalLight.shadowCameraRight = 300;
directionalLight.shadowCameraTop = 300;
directionalLight.shadowCameraBottom = -300;
directionalLight.shadowCameraVisible = true;

我的collada对象有点大,我的shadowCamera边界也是如此.

我的渲染器设置:

renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setClearColor(0x222222);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType …

我有一个包含2个lfs跟踪文件的repoA。我像这样将那个仓库带入repoB

cd repoB
git fetch repoA somebranch
git checkout -b temp FETCH_HEAD
git rebase someotherbranch

这将打印几行“正在应用：...”，然后

Using index info to reconstruct a base tree...
Falling back to patching base and 3-way merge...
error: Your local changes to the following files would be overwritten by merge:
    Assets/HappyFunTimes/HappyFunTimesCore/Server/Resources/HFTOSXServer.bytes
Please, commit your changes or stash them before you can merge.
Aborting
error: Failed to merge in the changes.
Patch failed at 0340 update server
The copy of the patch that failed is found …