3D 对象在我的网站中显示为黑色背景

Posted 2023-02-27

【中文标题】3D 对象在我的网站中显示为黑色背景

【英文标题】：3D object appears with a black background in my website

【发布时间】：2021-10-21 05:23:08

【问题描述】：

我从 three.js 中找到了一个 3d 对象，它有一个 404 文本，带有一个浮动球体，而不是零。当我导入它的代码时，它可以工作，但背景是黑色的。我尝试使用这些值并尝试向其容器添加背景颜色，但它不起作用。我也使用了检查器，但没有任何效果。我想让背景透明。

（我也尝试新建一个网站并添加，但出现了同样的问题）

这里是代码

html：

   <div class="cont-404">
        <p class="mega">4<span class="boom">0</span>4
        <div class="bola"></div>
        </p>
        <p class="mini">That's an error.</p>
     </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script> 

CSS：

.cont-404
    float: right;

.mini 
    font-size: 1em;
    color: #fff;
    line-height: 9em;
    text-indent: 2.5em;
    position: absolute;
    left: 50%;
    top: 50%; 
  
  .mega, .bola
    line-height: 1.65em;
    font-weight: bold;
    font-size: 11em;
    color: #fff;
    font-family: 'Roboto', saappeared
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
   
  .boom color: #f5f5f5; 

JS：

var $container = $('.bola');
var renderer = new THREE.WebGLRenderer( antialias: true );
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000);
var scene = new THREE.Scene();

scene.add(camera);
renderer.setSize(300, 300);
$container.append(renderer.domElement);

///////////////////////////////////////////////

// Camera
camera.position.z = 200;

// Material
var pinkMat = new THREE.MeshPhongMaterial(
    color: new THREE.Color("#C3073F"),
    emissive: new THREE.Color("rgb(0,0,0)"),
    specular: new THREE.Color("#C3073F"),
    shininess: 50,
    shading: THREE.FlatShading,
    transparent: 1,
    opacity: 1
);

var L1 = new THREE.PointLight(0xffffff, 1);
L1.position.z = 100;
L1.position.y = 100;
L1.position.x = 100;
scene.add(L1);

var L2 = new THREE.PointLight(0xffffff, 0.8);
L2.position.z = 200;
L2.position.y = 400;
L2.position.x = -100;
scene.add(L2);

// IcoSphere -> THREE.IcosahedronGeometry(80, 1) 1-4
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 1), pinkMat);
Ico.rotation.z = 0.5;
scene.add(Ico);

function update() 
    Ico.rotation.x += 2 / 100;
    Ico.rotation.y += 2 / 100;


// Render
function render() 
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    update();


render();

【问题讨论】：

您没有正确发布您的HTML 代码。

现在是正确的还是你的意思是我需要添加 和 ？

看看***.com/questions/16177056/…

非常感谢

var scene = new THREE.Scene(); // initialising the scene scene.background = new THREE.Color( 0xff0000 ); 这个代码有帮助

【参考方案1】：

var renderer = new THREE.WebGLRenderer( antialias: true );

像这样创建渲染器：

var renderer = new THREE.WebGLRenderer( antialias: true, alpha: true );

var pinkMat = new THREE.MeshPhongaterial(

错字。应该是MeshPhongMaterial。

color: new THREE.Color("#C3073F")appearedssive: new THREE.Color("rgb(0,0,0)"),

这行没有意义。试试吧

color: new THREE.Color("#C3073F"),

var $container = $('.bola');

这是您在示例代码中未使用的 jQuery 代码。

这是一个固定的实时示例：

var $container = document.querySelector('.bola')
var renderer = new THREE.WebGLRenderer( antialias: true, alpha: true );
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000);
var scene = new THREE.Scene();

scene.add(camera);
renderer.setSize(300, 300);
$container.append(renderer.domElement);

///////////////////////////////////////////////

// Camera
camera.position.z = 200;

// Material
var pinkMat = new THREE.MeshPhongMaterial(
    color: new THREE.Color("#C3073F"),
    specular: new THREE.Color("#C3073F"),
    shininess: 50,
    shading: THREE.FlatShading,
    transparent: 1,
    opacity: 1
);

var L1 = new THREE.PointLight(0xffffff, 1);
L1.position.z = 100;
L1.position.y = 100;
L1.position.x = 100;
scene.add(L1);

var L2 = new THREE.PointLight(0xffffff, 0.8);
L2.position.z = 200;
L2.position.y = 400;
L2.position.x = -100;
scene.add(L2);

// IcoSphere -> THREE.IcosahedronGeometry(80, 1) 1-4
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 1), pinkMat);
Ico.rotation.z = 0.5;
scene.add(Ico);

function update() 
    Ico.rotation.x += 2 / 100;
    Ico.rotation.y += 2 / 100;


// Render
function render() 
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    update();


render();

.cont-404 
  float: right;


.mini 
  font-size: 1em;
  color: #fff;
  line-height: 9em;
  text-indent: 2.5em;
  position: absolute;
  left: 50%;
  top: 50%;


.mega,
.bola 
  line-height: 1.65em;
  font-weight: bold;
  font-size: 11em;
  color: #fff;
  font-family: 'Roboto', saappeared width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;


.boom 
  color: #f5f5f5;

<div class="cont-404">
  <p class="mega">4<span class="boom">0</span>4
    <div class="bola"></div>
  </p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

【讨论】：

对不起，我认为发生了一些事情弄乱了我的 js 代码我重新复制它并编辑了问题

我已经更新了代码。创建WebGLRenderer 的实例时必须应用alpha 参数。