three实现一个三角体猫效果代码-html代码-BFW代码库

three实现一个三角体猫效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个三角体猫效果代码

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

<html lang="en"><head>


  
  
<style>
body {
  margin: 0;
}

.animation {
  width: 100%;
  height: 100%;
  background: #ddd;
}
</style>



</head>

<body >
  <div class="animation"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
      <script  type="module">
import threeGltfLoader from "https://cdn.skypack.dev/three-gltf-loader@1.111.0";

const Scene = () => {
  return new THREE.Scene();
};

const Camera = () => {
  const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight);

  camera.position.set(-15, 3, 30);
  return camera;
};

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

  renderer.setSize(window.innerWidth, window.innerHeight);
  element.appendChild(renderer.domElement);
  return renderer;
};

const Lights = () => {
  const ambient = new THREE.AmbientLight("#707070", 0.95);
  const directional = new THREE.DirectionalLight("#ffffff", 0.15);
  directional.position.set(-10, 20, 10);
  const hemisphere = new THREE.HemisphereLight("#ffffff", 0xdddddd, 0.5);

  return [ambient, directional, hemisphere];
};

const Cat = scene => {
  const loader = new threeGltfLoader();

  loader.load(
  "//repo.bfw.wiki/bfwrepo/threemodel/origami-cat-model.gltf",
  function (gltf) {
    var geometry = gltf.scene;
    var newMaterial = new THREE.MeshLambertMaterial({
      color: "#cccccc" });

    geometry.traverse(o => {
      if (o.isMesh) o.material = newMaterial;
    });
    geometry.position.set(0, -15, -22);

    scene.add(geometry);
  },
  undefined,
  function (error) {
    console.error("Oh no!!!", error);
  });

};

const Sphere = (color, size, scene) => {
  const geometry = new THREE.SphereGeometry(size, 2, 2);
  const material = new THREE.MeshLambertMaterial({
    color });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;
  mesh.receiveShadow = true;

  const scale = .........完整代码请登录后点击上方下载按钮下载查看