three编写一个三维通用效能模型旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:three编写一个三维通用效能模型旋转动画效果代码

代码标签: 三维 通用 效能 模型 旋转 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
  margin: 0;
  height: 100%;
}

#c {
  width: 100%;
  height: 100%;
  display: block;
}
</style>



</head>

<body translate="no" >
  <canvas id="c"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
  
      <script>
const canvas = document.querySelector("#c");
const renderer = new THREE.WebGL1Renderer({ canvas });

const fov = 75,
aspect = 2,
near = 0.1,
far = 5,
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

camera.position.z = 4;

const scene = new THREE.Scene();
scene.background = new THREE.Color("#FFCCCC");

const gemRadius = 0.6;
const gemGeometry = new THREE.IcosahedronBufferGeometry(gemRadius);
const gemMaterial = new THREE.MeshStandardMaterial({
  color: 0x6699ff,
  emissive: 0x83a5ff,
  roughness: 0.8,
  metalness: 1 });

const gem = new THREE.Mesh(gemGeometry, gemMaterial);
scene.add(gem);

const radius = 1;
const detail = 1;
const geometry = new THREE.IcosahedronBufferGeometry(radius, detail);

const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true,
  wireframeLinewidth: 1 });


const object = new THREE.Mesh(geometry, material);
scene.add(object);

//ライト
function makePointLight(color, intense, dist, decay) {
  const po.........完整代码请登录后点击上方下载按钮下载查看

网友评论0