three-render

three.js 版本 r135

介绍

基于 react-reconciler 实现 three.js 的渲染

启动

yarn
yarn start

地图

<Stats>
  <OrbitControls
    properties={{
      enableZoom: true,
      enablePan: true,
      autoRotateSpeed: 2,
      autoRotate: false,
      enableDamping: true,
    }}
  >
    <WebGLRenderer ref={webGLRenderer} width={width} height={height} clearColor={0xffffff} pixelRatio={window.devicePixelRatio}>
      <Scene
        background={0x020924}
        fog={{
          color: 0x020924,
          near: 200,
          far: 1000,
        }}
      >
        <Mesh>
          <SphereGeometry radius={5} widthSegments={100} heightSegments={100}></SphereGeometry>
          <MeshStandardMaterial side={DoubleSide}>
            <ImageTexture src={earthImg} type="map" />
          </MeshStandardMaterial>
        </Mesh>
        <Points scale={{ x: 300, y: 300, z: 300 }}>
          <BufferGeometry>
            <Vectors number={3} attribute={"position"} type={Float32Array}>
              {positions.map((val: any, i: number) => {
                return <Vector x={val.x} y={val.y} z={val.z} key={i} />;
              })}
            </Vectors>
            <Vectors number={3} attribute={"color"} type={Float32Array}>
              {colors.map((val: any, i: number) => {
                return <Vector x={val.x} y={val.y} z={val.z} key={i} />;
              })}
            </Vectors>
          </BufferGeometry>
          <PointsMaterial size={1} transparent={true} opacity={1} vertexColors={true} blending={AdditiveBlending} sizeAttenuation={true}>
            <ImageTexture src={starImg} type="map" />
          </PointsMaterial>
        </Points>
        <AmbientLight color={0xcccccc} intensity={1.1} />
        <DirectionalLight color={0xffffff} intensity={0.2} position={{ x: 1, y: 0.1, z: 0, n: 1 }} />
        <DirectionalLight color={0xff2ffff} intensity={0.2} position={{ x: 1, y: 0.1, z: 0.1, n: 1 }} />
        <HemisphereLight skyColor={0xffffff} groundColor={0x444444} intensity={0.2} position={{ x: 0, y: 1, z: 0 }} />
        <DirectionalLight
          color={0xffffff}
          position={{ x: 1, y: 500, z: -20 }}
          castShadow
          camera={{
            top: 18,
            bottom: -10,
            left: -52,
            right: 12,
          }}
        />
      </Scene>
      <PerspectiveCamera fov={45} aspect={width / height} near={1} far={10000} position={{ x: 5, y: -20, z: 200 }} look={{ x: 0, y: 3, z: 0 }} />
    </WebGLRenderer>
  </OrbitControls>
</Stats>

辅助线

<Stats>
  <OrbitControls
    properties={{
      enableDamping: true,
      ampingFactor: 0.25,
      enableZoom: false,
    }}
  >
    <WebGLRenderer ref={webGLRenderer} width={width} height={height} antialias clearColor={0xcccccc} pixelRatio={window.devicePixelRatio}>
      <Scene fog={new FogExp2(0xcccccc, 0.002)}>
        {positions.map((val: any, i: number) => {
          return (
            <Mesh position={val} key={i} matrixAutoUpdate={false} updateMatrix>
              <CylinderGeometry radiusTop={0} radiusBottom={10} height={30} radialSegments={4} heightSegments={1} />
              <MeshPhongMaterial parameters={{ color: 0xffffff, flatShading: FlatShading }} />
            </Mesh>
          );
        })}
        <DirectionalLight color={0xffffff} position={{ x: 1, y: 1, z: 1 }} />
        <DirectionalLight color={0x002288} position={{ x: -1, y: -1, z: -1 }} />
        <AmbientLight color={0x222222} />
        <AxesHelper size={2000} />
      </Scene>
      <PerspectiveCamera fov={60} aspect={width / height} near={1} far={1000} position={new Vector3(1, 1, 5)} />
    </WebGLRenderer>
  </OrbitControls>
</Stats>