• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript THREE.WebGLRenderer类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中THREE.WebGLRenderer的典型用法代码示例。如果您正苦于以下问题:TypeScript WebGLRenderer类的具体用法?TypeScript WebGLRenderer怎么用?TypeScript WebGLRenderer使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了WebGLRenderer类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: main

export async function main(target: HTMLElement) {
  const THREE = await import("three");
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(20, 1, 0.002, 1000);
  camera.rotation.x = -0.02 * (Math.random() * 0.5 + 0.5);
  camera.rotation.y = 0.02 * (Math.random() * 0.5 + 0.5);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  target.appendChild(renderer.domElement);
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ff00ff" }),
  );
  const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ffff00" }),
  );
  cube.position.z = -2.1;
  cube2.position.z = -2.10001;
  cube2.position.x = -0.01;
  cube2.position.y = -0.01;
  scene.add(cube);
  scene.add(cube2);
  function render() {
    camera.rotation.x += 0.0000001;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
}
开发者ID:calebegg,项目名称:website,代码行数:30,代码来源:zfighting.ts


示例2: initCubeScene

    initCubeScene() {
        var camera, scene, renderer;
        var mesh;

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;
        scene = new THREE.Scene();
        //var texture = new THREE.TextureLoader().load('textures/crate.gif');
        var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
        //var material = new THREE.MeshBasicMaterial({ map: texture });
        mesh = new THREE.Mesh(geometry);
        scene.add(mesh);
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
        
        animate();

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
    }
开发者ID:pinuchfab,项目名称:nlytethreejs,代码行数:33,代码来源:cabinet-view.ts


示例3: createRenderer

export function createRenderer(elm: HTMLElement): THREE.WebGLRenderer {
  const renderer = new WebGLRenderer({ antialias: true });
  renderer.setSize(elm.clientWidth, elm.clientHeight);
  elm.appendChild(renderer.domElement);
  renderer.setClearColor(0xffffff, 1.0);
  return renderer;
}
开发者ID:ygoto3,项目名称:sample-threejs-typescript,代码行数:7,代码来源:three.ts


示例4: require

( { require, cache, detached } ) => {
  const THREE = require ( 'THREE' )
  const container = document.getElementById ( 'screen' )
  const screen: Screen = container.getBoundingClientRect ()

  if ( !cache.renderer ) {
    const renderer = new THREE.WebGLRenderer ( { antialias: true } )
    renderer.setPixelRatio ( window.devicePixelRatio )
    renderer.setSize ( screen.width, screen.height )
    container.appendChild ( renderer.domElement )
    cache.renderer = renderer

    cache.camera = new THREE.PerspectiveCamera
    ( 60, screen.width / screen.height, 0.1, 100 )
  }

  const renderer = cache.renderer
  const camera   = cache.camera

  if ( detached ) {
    container.removeChild ( renderer.domElement )
  }

  camera.position.z = 2
  camera.aspect = screen.width / screen.height
  camera.updateProjectionMatrix ()

  renderer.setSize ( screen.width, screen.height )

  return { renderer, camera, screen }
}
开发者ID:lucidogen,项目名称:lucy-library,代码行数:31,代码来源:three.WebGLRenderer.ts


示例5: createRenderer

 createRenderer() {
   var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setClearColor('#ebe5e7');
   renderer.setSize(this.WIDTH, this.HEIGHT);
   renderer.shadowMap.enabled = true;
   return renderer;
 }
开发者ID:403177368,项目名称:all,代码行数:8,代码来源:index.ts


示例6:

    this.hasPropGroup(["width", "height"], (instance: WebGLRenderer,
                                            newSize: {
                                              width?: number,
                                              height?: number,
                                            }) => {
      const updatedSize: { width: number, height: number } = Object.assign({}, instance.getSize(), newSize);

      instance.setSize(updatedSize.width, updatedSize.height);
    });
开发者ID:sychuginaanna,项目名称:react-three-renderer-fiber,代码行数:9,代码来源:webGLRenderer.ts


示例7: init

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.z = 1000;
  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}
开发者ID:aellerton,项目名称:bare-basic-typescript-webpack-three,代码行数:12,代码来源:app.ts


示例8: init

  public init(container: HTMLElement, meshFactory: MeshFactory, heightStretch:number, widthStretch:number, viewWidth:number, viewDepth:number) {
    this.container = container;
    this.meshFactory = meshFactory;
    this.heightStretch = heightStretch;
    this.widthStretch = widthStretch;
    this.viewWidth = viewWidth;
    this.viewDepth = viewDepth;


    const width = this.container.clientWidth;
    const height = this.container.clientHeight;

    // Clock
  	this.clock = new Clock();

    // Camera
    this.camera = new PerspectiveCamera( 60, width / height, 1, 20000 );
    this.camera.position.y = 3000;
    this.camera.position.x = 2000;
    this.camera.position.z = 1800;

    // Controls
    this.controls = new OrbitControls(this.camera, container);
    this.controls.center.set( 0.0, 100.0, 0.0 );
    this.controls.keyPanSpeed = 100;
    this.controls.center.y = 1000;

    // Scene
    this.scene = new Scene();

    this.renderer = new WebGLRenderer();
    this.renderer.setClearColor( 0xbfd1e5 );
    this.renderer.setSize( width, height );

    // Mouse
    this.mouse = new Vector2();

    // Raycaster
    this.raycaster = new Raycaster();

    // RollOverMesh
//      	this.rollOverMesh = rollOverMesh.clone();
//      	this.scene.add(this.rollOverMesh);

    container.appendChild( this.renderer.domElement );

    // start animation
    this.animate();

    // bind to window resizes
    window.addEventListener('resize', _ => this.onResize());
  }
开发者ID:NomadHu,项目名称:first_steps,代码行数:52,代码来源:render-service.ts


示例9: if

 this.hasPropGroup(["clearColor", "clearAlpha"], (instance: WebGLRenderer,
                                                  newColors: {
                                                    clearColor?: number,
                                                    clearAlpha?: number,
                                                  }) => {
   if (newColors.clearColor !== undefined) {
     if (newColors.clearAlpha !== undefined) {
       instance.setClearColor(newColors.clearColor, newColors.clearAlpha);
     } else {
       instance.setClearColor(newColors.clearColor, instance.getClearAlpha());
     }
   } else if (newColors.clearAlpha !== undefined) {
     instance.setClearAlpha(newColors.clearAlpha);
   }
 });
开发者ID:sychuginaanna,项目名称:react-three-renderer-fiber,代码行数:15,代码来源:webGLRenderer.ts


示例10: updateMaterialUniforms

export function updateMaterialUniforms (group: Object3D, camera: Camera, renderer: WebGLRenderer, cDist: number, bRadius: number) {
  const {width, height} = renderer.getSize()
  const canvasHeight = height
  const pixelRatio = renderer.getPixelRatio()
  const ortho = camera.type === 'OrthographicCamera'

  resolution.set(width, height)
  projectionMatrixInverse.getInverse(camera.projectionMatrix)
  projectionMatrixTranspose.copy(camera.projectionMatrix).transpose()

  group.traverse(function (o: any) {
    const m = o.material
    if (!m) return

    const u = m.uniforms
    if (!u) return

    if (m.clipNear) {
      const nearFactor = (50 - m.clipNear) / 50
      const nearClip = cDist - (bRadius * nearFactor)
      u.clipNear.value = nearClip
    }

    if (u.canvasHeight) {
      u.canvasHeight.value = canvasHeight
    }

    if (u.resolution) {
      u.resolution.value.copy(resolution)
    }

    if (u.pixelRatio) {
      u.pixelRatio.value = pixelRatio
    }

    if (u.projectionMatrixInverse) {
      u.projectionMatrixInverse.value.copy(projectionMatrixInverse)
    }

    if (u.projectionMatrixTranspose) {
      u.projectionMatrixTranspose.value.copy(projectionMatrixTranspose)
    }

    if (u.ortho) {
      u.ortho.value = ortho
    }
  })
}
开发者ID:arose,项目名称:ngl,代码行数:48,代码来源:viewer-utils.ts



注:本文中的THREE.WebGLRenderer类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript THREE.js.Vector2类代码示例发布时间:2022-05-25
下一篇:
TypeScript THREE.Vector4类代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap