我从 three.js 中找到了一个 3d 对象,它有一个 404 文本和一个 float 球体而不是零。当我导入它的代码时,它可以工作,但背景是黑色的。我尝试使用这些值并尝试为其容器添加背景颜色,但没有成功。我也使用了检查员,但没有任何效果。我想让背景透明。
(我也试过做一个新的网站并添加它,但出现了同样的问题)
这是代码
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();
最佳答案
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>
关于javascript - 3D 对象在我的网站上显示为黑色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68848898/