three实现一个三维蓝宝石效果代码-html代码-BFW代码库

three实现一个三维蓝宝石效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个三维蓝宝石效果代码

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

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">

<style>
    body{
        padding: 0;
        margin:0;
    }
</style>
  
</head>

<body>
  <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script>

    <script >
        var container = document.getElementById( 'container' );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xd3b3ff, 1 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 0, -2, 4 );

var controls = new THREE.OrbitControls( camera, renderer.domElement );

var scene = new THREE.Scene();

var sapphire = new THREE.Color( 0x0f52ba );

// lights

var aLight = new THREE.AmbientLight( sapphire );
scene.add( aLight );

var dLight1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
dLight1.position.set( 1, 0.8, 1 );
scene.add( dLight1 );

var dLight2 = new THREE.DirectionalLight( 0xffffff, 0.2 );
dLight2.position.set( -1, -0.5, 1 );
scene.add( dLight2 );

var dLight3 = new THREE.DirectionalLight( 0xffffff, 0.1 );
dLight3.position.set( 0.5, .5, 1 );
scene.add( dLight3 );

// gem

var gemGroup = new THREE.Group();
scene.add( gemGroup );

var height = 0.5;
var gemGeo = new THREE.CylinderGeometry( 0.5, 1, height, 6 );
gemGeo.faces.splice( -6 ); // remove bottom cap

var gemMat = new THREE.MeshPhongMaterial({
	flatShading: true,
	side: THREE.DoubleSide,
	color: sapphire,
	specular: 0xffffff,
	transparent: true,
	opacity: 0.9
});

var gem = new THREE.Mesh( gemGeo, gemMat );
gem.scale.z = 1.5;
gem.rotation.x = Math.PI / 2;
gem.position.z = height / 2;;
gemGroup.add( gem );

var wireframe = new THREE.EdgesGeometry( gemGeo );
var line = new THREE.LineSegments( wireframe );
line.material.color.setHex( 0x1c75ff );
line.material.transparent = true;
line.material.opacity = 0.7;
gem.add( line );

var back = gem.clone();
back.rotation.z = Math.PI;
.........完整代码请登录后点击上方下载按钮下载查看