Fatal编程技术网
  • javascript/
  • Javascript 3.js渐变背景色不'；行不通

Javascript 3.js渐变背景色不'；行不通

javascript css three.js

Javascript 3.js渐变背景色不'；行不通,javascript,css,three.js,Javascript,Css,Three.js,我用three.js制作了一个3d图形项目的网站 为了制作渐变背景色，我在谷歌搜索了几个小时 我发现下面的源代码被广泛使用 html { width: 100%; height: 100%; background: #11e8bb; /* Old browsers */ background: -moz-linear-gradient(top, #11e8bb 0%, #8200c9 100%); /* FF3.6-15 */ background: -webkit-li

我用three.js制作了一个3d图形项目的网站

为了制作渐变背景色，我在谷歌搜索了几个小时

我发现下面的源代码被广泛使用

html {
  width: 100%;
  height: 100%;

  background: #11e8bb; /* Old browsers */
  background: -moz-linear-gradient(top,  #11e8bb 0%, #8200c9 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #11e8bb 0%,#8200c9 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #11e8bb 0%,#8200c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#8200c9',GradientType=0 ); /* IE6-9 */
}
只需将
linear gradient
设置为background，其他Exmaple就可以使用该代码

但我的情况是，它不起作用

我的密码在这里

[index.html]

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script> 
  <script src="OrbitControls.js"></script>
  <script src="Device2.js"></script>
  <script src="FlyControls.js"></script>
  <script src="hammer.js"></script>
  <script src="https://unpkg.com/three.texttexture"></script>
  <script src="https://unpkg.com/three.textsprite"></script>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
  <header>
    <div class="header-left">
      <img src="./img/company_logo.png">
    </div>
    <div class="header-right">
      <a href="#">ABOUT</a>
      <a href="#">PRODUCT</a>
      <a href="#">CONTACT</a>
    </div>
  </header>
<!--  <div id="threejs" data-long-press-delay="300" onmousedown="mouseDown()"></div>-->
  <div id="threejs"></div>
  <script src="src.js"></script>
  <div class="down-btn">
    <a href="#section">&darr;</a>
  </div>
  <section id="section">
    SECTION
  </section>
</body>
</html>


部分
[src.js]

// Define Variables
var myElement = document.getElementById("threejs");
let camera, scene, renderer;
const mouse = new THREE.Vector2();
clicked = new THREE.Vector2();
const target = new THREE.Vector2();
const windowHalf = new THREE.Vector2( window.innerWidth / 2, window.innerHeight / 2 );
const moveState = {forward: 0, back: 0};
var isMobile = false;
var hold = -1;

/****** Define Function ******/
/*****************************/

checkMobile = () => {
  var UserAgent = navigator.userAgent;

  if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
      isMobile = true;
  } else {
      isMobile = false;
  }
}
checkMobile();

// Pinch zoom
var hammer = new Hammer(myElement);
hammer.get('pinch').set({ enable: true });
hammer.on('pinch', function(event) {
  event.preventDefault();
  if(parseInt(event.scale) > 0) { // Zoom in/out check
    camera.position.z -= 4; 
  } else {
    camera.position.z += 4.5;
  }
});

onMouseMove = (event) => {
  mouse.x = ( (event.clientX/2) - (windowHalf.x/2) );
  mouse.y = ( (event.clientY/2) - (windowHalf.y/2) );
  clicked.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  clicked.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

onResize = (event) => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  windowHalf.set( width / 2, height / 2 );

  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize( width, height );
}

onContextMenu = (event) => {
  event.preventDefault();
}

onMouseDown = (event) => {
  hold = event.which;
}

onMouseUp = () => {
  hold = -1;
};

// Start Script
init = () => {
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 1000;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxBufferGeometry();
  const material = new THREE.MeshNormalMaterial({ transparent: true });

  if(isMobile) { // 모바일이면 
    var controls = new THREE.DeviceOrientationControls(camera);
  } else {
    console.log('isMobile false');
  }

  group = new THREE.Group();

  for ( let i = 0; i < 800; i ++ ) {       
    let sprite = new THREE.TextSprite({
      textSize: 2,
      redrawInterval: 1,
      texture: {
        text: 'TEST',
        fontFamily: 'Arial, Helvetica, sans-serif',
      },
      material: {
        color: 'white',
      },
    });
    sprite.position.x = Math.random() * 180-100;
    sprite.position.y = Math.random() * 180-100;
    sprite.position.z = Math.random() * 1000-40;
    group.add(sprite);

  }
  scene.add(group);

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // Event handler
  document.addEventListener('mousemove', onMouseMove, false);
  document.addEventListener('mousedown', onMouseDown, false);
  document.addEventListener('mouseup', onMouseUp, false);
  document.addEventListener('contextmenu', onContextMenu, false);

  window.addEventListener('resize', onResize, false);

  // Helper
  var axesHelper = new THREE.AxesHelper( 15 );
  scene.add( axesHelper );

  animate = () => {
    // For camera follow mouse cursor
    target.x = ( 1 - mouse.x ) * 0.002;
    target.y = ( 1 - mouse.y ) * 0.002;
    camera.rotation.x += 0.05 * ( target.y - camera.rotation.x );
    camera.rotation.y += 0.05 * ( target.x - camera.rotation.y );

    if(isMobile) {
      controls.update();
    }
    switch(hold) {
      case 1:
        if(camera.position.z > 0) {
          camera.position.z -= 4;
        }
        break;
      case 3:
        camera.position.z += 4;
        break;
    }

    // Object opacity related to distance between camera and object
    for (i = 0; i < 800; i++) {
      var distance = camera.position.distanceTo(group.children[i].position);
      var opacity = -1 / 400 * distance + 1;
      if (opacity < 0) {
        opacity = 0;
      }
      group.children[i].material.opacity = opacity;
    }

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
  }
  // Run
  animate();
}
// Run
init();

//定义变量
var myElement=document.getElementById（“threejs”）；
让相机、场景、渲染器；
const mouse=new THREE.Vector2（）；
clicked=new THREE.Vector2（）；
const target=new THREE.Vector2（）；
const windowHalf=new THREE.Vector2（window.innerWidth/2，window.innerHeight/2）；
const moveState={forward:0，back:0}；
var isMobile=false；
var hold=-1；
/******定义函数******/
/*****************************/
checkMobile=（）=>{
var UserAgent=navigator.UserAgent；
如果（UserAgent.match（/iPhone | iPod | Android | Windows CE | BlackBerry | Symbian | Windows Phone | webOS | Opera Mini | Opera Mobi | POLARIS | IEMobile | lgtelecom | nokia | SonyEricsson/i）！=null | UserAgent.match（/LG |三星|三星/）！=null）{
isMobile=true；
}否则{
isMobile=false；
}
}
checkMobile（）；
//收缩变焦
var hammer=新锤子（myElement）；
hammer.get（'pinch'）.set（{enable:true}）；
锤击打开（“挤压”，功能（事件）{
event.preventDefault（）；
如果（parseInt（event.scale）>0）{//放大/缩小检查
摄像机位置z-=4；
}否则{
摄像机位置z+=4.5；
}
});
onMouseMove=（事件）=>{
mouse.x=（（event.clientX/2）-（windowHalf.x/2））；
mouse.y=（（event.clientY/2）-（windowHalf.y/2））；
单击.x=（event.clientX/window.innerWidth）*2-1；
单击.y=-（event.clientY/window.innerHeight）*2+1；
}
onResize=（事件）=>{
常量宽度=window.innerWidth；
const height=window.innerHeight；
窗半。设置（宽度/2，高度/2）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
设置大小（宽度、高度）；
}
onContextMenu=（事件）=>{
event.preventDefault（）；
}
onMouseDown=（事件）=>{
hold=事件。哪个；
}
onMouseUp=（）=>{
保持=-1；
};
//开始脚本
初始化=（）=>{
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，15000）；
摄像机位置x=0；
摄像机位置y=0；
摄像机位置z=1000；
场景=新的三个。场景（）；
const geometry=new THREE.BoxBufferGeometry（）；
const material=new THREE.MeshNormalMaterial（{transparent:true}）；
if（isMobile）{//모바일이면 
var控制=新的三个设备方向控制（摄像头）；
}否则{
log（'isMobile false'）；
}
组=新的三个。组（）；
对于（设i=0；i<800；i++）{
设sprite=new THREE.TextSprite({
文本大小：2，
重绘间隔：1，
纹理：{
文本：“测试”，
fontFamily：“Arial，Helvetica，无衬线”，
},
材料：{
颜色：'白色'，
},
});
sprite.position.x=Math.random（）*180-100；
sprite.position.y=Math.random（）*180-100；
sprite.position.z=Math.random（）*1000-40；
添加（雪碧）；
}
场景。添加（组）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//事件处理程序
document.addEventListener（'mousemove'，onMouseMove，false）；
document.addEventListener（'mousedown'，onMouseDown，false）；
document.addEventListener（'mouseup'，onMouseUp，false）；
document.addEventListener（'contextmenu'，onContextMenu，false）；
addEventListener（'resize'，onResize，false）；
//助手
var axesHelper=新的三个axesHelper（15）；
场景。添加（AxeHelper）；
动画=（）=>{
//对于摄影机，请跟随鼠标光标
target.x=（1-mouse.x）*0.002；
target.y=（1-mouse.y）*0.002；
camera.rotation.x+=0.05*（target.y-camera.rotation.x）；
camera.rotation.y+=0.05*（target.x-camera.rotation.y）；
if（isMobile）{
控件更新（）；
}
开关（保持）{
案例1：
如果（摄影机位置z>0）{
摄像机位置z-=4；
}
打破
案例3：
摄像机位置z+=4；
打破
}
//与摄影机和对象之间的距离相关的对象不透明度
对于（i=0；i<800；i++）{
var distance=camera.position.distanceTo（group.children[i].position）；
变量不透明度=-1/400*距离+1；
如果（不透明度<0）{
不透明度=0；
}
group.children[i].material.opacity=opacity；
}
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
//跑
制作动画（）；
}
//跑
init（）；
只是一个简单的网站。我在html中定义了背景，以便将背景颜色更改为渐变色

但它不起作用

有什么解决办法吗

谢谢。

三张画布是否完全覆盖了背景？试一试

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
三张画布是否完全覆盖了背景？试一试

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