threejs_r132.常见材质示例

web/JavaScript threejs_r132.常见材质示例

<canvas id="canvas"/>
<script>

    let three_script = document.createElement("script");
    three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three_r132_min.js";

    let head = document.getElementsByTagName("head")[0];
    head.appendChild(three_script);

    three_script.onload = function () {
        let cinema = new Cinema();
        cinema.render();
    };

    class MeshBasicPlaneActor { // 平面1
        constructor() {
            // 基础网格材质
            // 不受带有方向光源影响
            // 使用这种材质会被渲染成简单的平面多边形，而且也可以显示几何体的线框。
            let mat = new THREE.MeshBasicMaterial({
                color: "#9083e3",  // 漫反射的颜色
                // wireframe:true, // 仅显示边框线。默认false显示面。
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 50;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class MeshLambertPlaneActor { // 平面2
        constructor() {
            // 单位亮度材质
            // 对场景中的光源产生反应。
            // 无光泽表面的材质，无镜面高光。
            // 这种材质可以用来创建暗淡的并不光亮的表面，模拟一些粗糙无明显反光表面（如未经处理的木材或石头）。
            let mat = new THREE.MeshLambertMaterial({
                color: "#ff0003",         // 漫反射的颜色。默认白色。
                // emissive: "#0000ff",   // 材质本身的颜色，不受光照影响。默认值为黑色。和color融合为最终看到的颜色
                // map: texture,          // 普通纹理贴图
                // lightMap:textureLight, // 设置光照贴图
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 150;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class MeshPhongPlaneActor { // 平面3
        constructor() {
            // 高光表面网格材质
            // 对场景中的光源产生反应。
            // 模拟带有高光的闪亮表面（如漆木）。
            let mat = new THREE.MeshPhongMaterial({
                color: "#00f9ef",       // 漫反射的颜色。默认白色。
                // emissive: "#6fa30f", // 材质本身颜色，和color融合为最终看到的颜色
                shininess: 5,           // 光滑度，指定高光部分的亮度，默认值为30
                specular: "#ffffff",    // 材料高光部分的颜色，默认0x111111深灰色。如果和color相同材质会类似金属；设置成灰色则像塑料。
                // map: texture,        // 普通纹理贴图
                // bumpMap:textureBump, // 凹凸贴图
                // normalMap: texture1, // 法线贴图
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 250;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class MeshStandardPlaneActor { // 平面4
        constructor() {
            // 标准网格材质
            // 物理网格材质的基类
            // 基于物理渲染，效果更加逼真
            let mat = new THREE.MeshStandardMaterial({
                color: "#9e09f9", // 漫反射的颜色。默认白色。
                roughness: 0.53,  // 粗糙度属性。0镜面 - 1完全散射。默认1。
                metalness: 0.1,   // 表示材质像金属的程度。默认0。非金属(木材或石材)0 - 金属1。[本例1时会黑]
                // roughnessMap:texture, // 糙面贴图
                // metalnessMap:texture, // 金属贴图
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 350;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class MeshPhysicalPlaneActor { // 平面5
        constructor() {
            // 物理网格材质
            // 基于物理渲染，效果更加逼真
            let mat = new THREE.MeshPhysicalMaterial({
                color: "#9f2456",
                roughness: 0.3,
                metalness: 0.6,
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 450;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class MeshShadowPlaneActor { // 平面6
        constructor() {
            // 阴影材质
            // 可接收影子。仅有影子的地方可见。
            let mat = new THREE.ShadowMaterial({
                color: "#2f89ff", // 漫反射的颜色。默认白色。
                side: THREE.DoubleSide,
            });

            let planeGeo = new THREE.PlaneGeometry(100, 300);
            let mesh = new THREE.Mesh(planeGeo, mat);
            mesh.rotation.x = Math.PI * 0.5;
            mesh.position.x = 550;
            mesh.position.z = 150;
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.plane = mesh;
        }
    }

    class BoxActor { // 盒子
        constructor(position) {
            let mat = new THREE.MeshPhongMaterial({
                color: "#9f2456",
                emissive: "#6fa30f",
                shininess: 55,
                specular: "#ffffff",
                side: THREE.DoubleSide,
            });

            let width = 40;
            let height = 40;
            let depth = 40;

            let cubeGeo = new THREE.BoxGeometry(width, height, depth);
            let mesh = new THREE.Mesh(cubeGeo, mat);
            mesh.position.copy(position);
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.box = mesh;
        }
    }

    class SphereActor { // 球
        constructor(position) {
            let mat = new THREE.MeshPhysicalMaterial({
                color: "#9f2456",
                roughness: 0.3,
                metalness: 1,
                side: THREE.DoubleSide,
            });

            let radius = 20;

            let sphereGeo = new THREE.SphereGeometry(radius);
            let mesh = new THREE.Mesh(sphereGeo, mat);
            mesh.position.copy(position);
            mesh.castShadow = true;   // 允许投射阴影
            mesh.receiveShadow = true;// 允许接收阴影
            this.sphere = mesh;
        }
    }

    class CylinderActor { // 圆柱体
        constructor(position) {
            let mat = new THREE.MeshStandardMaterial({
                color: "#983754",
                roughness: 0.5,
                metalness: 1,
                side: THREE.DoubleSide,
            });

            let radiusTop = 15;
            let radiusBottom = 20;
            let height = 30;
            let topSegments = 15;
            let bottomSegments = 20;

            let cylinderGeo = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, topSegments, bottomSegments);
            let mesh = new THREE.Mesh(cylinderGeo, mat);
            mesh.position.copy(position);
            mesh.castShadow = true;    // 允许投射阴影
            mesh.receiveShadow = true; // 允许接收阴影
            this.cylinder = mesh;
        }
    }

    class SpriteActor { // 精灵体
        constructor(position) {
            let texture = new THREE.TextureLoader()
                .load('http://localhost:63342/HelloHtml/walt/godie.png');

            let mat = new THREE.SpriteMaterial({
                color: "#ff00ff",
                map: texture,
            });

            // 永远正对相机平面
            let _sprite = new THREE.Sprite(mat);
            _sprite.position.copy(position);
            _sprite.scale.set(50, 50, 1);

            this.sprite = _sprite;
        }
    }


    class AmbientLightManager {
        constructor() {
            // 环境光
            // 均匀的照亮场景中的所有物体，影响整个场景。
            // 它没有方向，不能投射阴影。
            let ambientcolor = "#ff49f3";
            this.light = new THREE.AmbientLight();
            this.light.color.set(ambientcolor);
        }
    }

    class HemisphereLightManager {
        constructor() {
            // 半球环境光
            // 产生从天空光线颜色到地面光线颜色的渐变效果。影响某些材质。
            // 不产生投影。
            // 可模拟在户外场景中的反光效果。
            let skyColor = "#ff0000";
            let groundColor = "#0000ff";
            let intensity = 0.8;
            this.light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
            this.light.position.set(120, 50, 150);
            // 半球光的图例
            let size = 10;
            this.lightHelper = new THREE.HemisphereLightHelper(this.light, size, groundColor);
        }
    }
 
    class DirectionalLightManager {
        constructor() {
            // 平行光
            // 类似比较强烈的日光，任何地方的强度都是一样的。
            // 可以产生投影（投影有范围，且须要被renderer和物体的支持）。
            let color = "#009f00";
            let intensity = 1;
            this.light = new THREE.DirectionalLight(color, intensity);
            this.light.position.set(300, 200, 150);       // 光线从哪个方向来
            this.light.target.position.set(300, 0, 150);  // 射向哪里
            // 平行光图例
            this.lightHelper = new THREE.DirectionalLightHelper(this.light);
            this.lightHelper.lightPlane.scale.set(20, 20, 20);     // 光源图例的大小
            this.lightHelper.lightPlane.material.color.set(color); // 光源图例的颜色
            this.lightHelper.targetLine.lookAt(new THREE.Vector3(300, 0, 150));

            this.light.castShadow = true;            //【开启产生投影】
            this.light.shadow.camera.visible = true; // 以下设置投影
            let d = 300;
            this.light.shadow.camera.left = -d;      // 产生的范围。如果物体只有部分在这个空间，影子也只有部分。
            this.light.shadow.camera.right = d;
            this.light.shadow.camera.top = d;
            this.light.shadow.camera.bottom = -d;
            this.light.shadow.camera.far = 500;      // 超过这个距离没有影子
            this.light.shadow.bias = -0.01;          // 偏差率
            this.light.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            this.light.shadow.mapSize.width = 2048;  // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            // 投影图例
            this.lightCameraHelper = new THREE.CameraHelper(this.light.shadow.camera);
        }
    }

    class SpotLightManager {
        constructor() {
            // 聚光灯光源
            // 类似手电筒，会形成一种锥形效果的光。
            // 可以产生阴影。
            let color = "#00ff00"; // 颜色的,默认0xffffff(white).
            let intensity = 1;     // 光照强度，默认1.
            let distance = 0;      // 光线逐渐衰减到此距离消失。默认0，不衰减。
            let angle = Math.PI / 3; // 光源的散射角度默认为夹角90度的Math.PI/2.
            // let penumbra = 0;     // 光影聚焦的百分比0-1之间，默认值为0，会产生锯齿.
            // let decay = 1;        // 光在距离上的强度.
            let spotLight = new THREE.SpotLight(color, intensity, distance, angle);
            spotLight.position.set(-100, 200, 20);
            this.light = spotLight;

            // 光源图例
            this.lightHelper = new THREE.SpotLightHelper(spotLight, color);
            this.lightHelper.cone.material.color.set(color); // 光源图例的颜色

            spotLight.castShadow = true;             // 【开启产生投影】
            spotLight.shadow.camera.visible = true;  // 投影设置
            spotLight.shadow.camera.near = 1;
            spotLight.shadow.camera.far = 500;        // 阴影最长投射距离
            spotLight.shadow.camera.fov = angle * 90; // 摄像机视锥体垂直视野角度。仅辅助看影子的far，没实际影响
            spotLight.shadow.mapSize.height = 2048;   // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            spotLight.shadow.mapSize.width = 2048;    // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            // 投影图例
            this.lightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
        }
    }

    class CameraManager {
        constructor(canvas) {
            let aspect = canvas.width / canvas.height;
            let _camera = new THREE.PerspectiveCamera(60, aspect, 1, 1500);
            _camera.position.set(300, 200, 400);
            _camera.lookAt(0, 5, 0);

            let _controls = new THREE.OrbitControls(_camera, canvas);
            _controls.target.set(0, 5, 0);

            this.camera = _camera;
        }
    }

    class Cinema {
        constructor() {
            let canvas = document.getElementById('canvas');
            canvas.width = 800;
            canvas.height = 350;

            this.renderer = new THREE.WebGLRenderer({canvas});
            this.renderer.shadowMap.enabled = true; // 【渲染阴影】
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // PCFSoftShadowMap 影子边缘柔和，基于像素。分辨率低时无效果。

            let cameraManager = new CameraManager(canvas);
            this.camera = cameraManager.camera;

            this.scene = new THREE.Scene();

            let axes = new THREE.AxesHelper(500);
            this.scene.add(axes);

            let mbplaneActor = new MeshBasicPlaneActor();
            this.scene.add(mbplaneActor.plane);

            let mlplaneActor = new MeshLambertPlaneActor();
            this.scene.add(mlplaneActor.plane);
            //
            let mpplaneActor = new MeshPhongPlaneActor();
            this.scene.add(mpplaneActor.plane);
            //
            let msplaneActor = new MeshStandardPlaneActor();
            this.scene.add(msplaneActor.plane);
            //
            let mp2planeActor = new MeshPhysicalPlaneActor();
            this.scene.add(mp2planeActor.plane);
            //
            let ms2planeActor = new MeshShadowPlaneActor();
            this.scene.add(ms2planeActor.plane);

            for (let i = 1; i < 7; i++) {
                let box = new BoxActor(new THREE.Vector3(i * 100 - 50, 50, 50));
                this.scene.add(box.box);

                let sphere = new SphereActor(new THREE.Vector3(i * 100 - 50, 50, 100));
                this.scene.add(sphere.sphere);

                let cylinder = new CylinderActor(new THREE.Vector3(i * 100 - 50, 50, 150));
                this.scene.add(cylinder.cylinder);

                let sprite = new SpriteActor(new THREE.Vector3(i * 100 - 50, 50, 200));
                this.scene.add(sprite.sprite);
            }

            this.scene.add(new AmbientLightManager().light);
            
            let hemisphereLightManager = new HemisphereLightManager();
            this.scene.add(hemisphereLightManager.light);
            this.scene.add(hemisphereLightManager.lightHelper); 
            
            let directionalLightManager = new DirectionalLightManager();
            this.scene.add(directionalLightManager.light);
            this.scene.add(directionalLightManager.light.target);
            this.scene.add(directionalLightManager.lightHelper);
            this.scene.add(directionalLightManager.lightCameraHelper);

            let spotLightManager = new SpotLightManager();
            this.scene.add(spotLightManager.light);
            this.scene.add(spotLightManager.lightHelper);
            this.scene.add(spotLightManager.lightCameraHelper);
        }

        render() {
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.render.bind(this));
        }
    }
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

let three_script = document.createElement("script");

three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three_r132_min.js";

let head = document.getElementsByTagName("head")[0];

head.appendChild(three_script);

three_script.onload = function () {

let cinema = new Cinema();

cinema.render();

};

class MeshBasicPlaneActor { // 平面1

constructor() {

// 基础网格材质

// 不受带有方向光源影响

// 使用这种材质会被渲染成简单的平面多边形，而且也可以显示几何体的线框。

let mat = new THREE.MeshBasicMaterial({

color: "#9083e3", // 漫反射的颜色

// wireframe:true, // 仅显示边框线。默认false显示面。

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 50;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class MeshLambertPlaneActor { // 平面2

constructor() {

// 单位亮度材质

// 对场景中的光源产生反应。

// 无光泽表面的材质，无镜面高光。

// 这种材质可以用来创建暗淡的并不光亮的表面，模拟一些粗糙无明显反光表面（如未经处理的木材或石头）。

let mat = new THREE.MeshLambertMaterial({

color: "#ff0003", // 漫反射的颜色。默认白色。

// emissive: "#0000ff", // 材质本身的颜色，不受光照影响。默认值为黑色。和color融合为最终看到的颜色

// map: texture, // 普通纹理贴图

// lightMap:textureLight, // 设置光照贴图

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 150;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class MeshPhongPlaneActor { // 平面3

constructor() {

// 高光表面网格材质

// 对场景中的光源产生反应。

// 模拟带有高光的闪亮表面（如漆木）。

let mat = new THREE.MeshPhongMaterial({

color: "#00f9ef", // 漫反射的颜色。默认白色。

// emissive: "#6fa30f", // 材质本身颜色，和color融合为最终看到的颜色

shininess: 5, // 光滑度，指定高光部分的亮度，默认值为30

specular: "#ffffff", // 材料高光部分的颜色，默认0x111111深灰色。如果和color相同材质会类似金属；设置成灰色则像塑料。

// map: texture, // 普通纹理贴图

// bumpMap:textureBump, // 凹凸贴图

// normalMap: texture1, // 法线贴图

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 250;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class MeshStandardPlaneActor { // 平面4

constructor() {

// 标准网格材质

// 物理网格材质的基类

// 基于物理渲染，效果更加逼真

let mat = new THREE.MeshStandardMaterial({

color: "#9e09f9", // 漫反射的颜色。默认白色。

roughness: 0.53, // 粗糙度属性。0镜面 - 1完全散射。默认1。

metalness: 0.1, // 表示材质像金属的程度。默认0。非金属(木材或石材)0 - 金属1。[本例1时会黑]

// roughnessMap:texture, // 糙面贴图

// metalnessMap:texture, // 金属贴图

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 350;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class MeshPhysicalPlaneActor { // 平面5

constructor() {

// 物理网格材质

// 基于物理渲染，效果更加逼真

let mat = new THREE.MeshPhysicalMaterial({

color: "#9f2456",

roughness: 0.3,

metalness: 0.6,

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 450;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class MeshShadowPlaneActor { // 平面6

constructor() {

// 阴影材质

// 可接收影子。仅有影子的地方可见。

let mat = new THREE.ShadowMaterial({

color: "#2f89ff", // 漫反射的颜色。默认白色。

side: THREE.DoubleSide,

});

let planeGeo = new THREE.PlaneGeometry(100, 300);

let mesh = new THREE.Mesh(planeGeo, mat);

mesh.rotation.x = Math.PI * 0.5;

mesh.position.x = 550;

mesh.position.z = 150;

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.plane = mesh;

}

class BoxActor { // 盒子

constructor(position) {

let mat = new THREE.MeshPhongMaterial({

color: "#9f2456",

emissive: "#6fa30f",

shininess: 55,

specular: "#ffffff",

side: THREE.DoubleSide,

});

let width = 40;

let height = 40;

let depth = 40;

let cubeGeo = new THREE.BoxGeometry(width, height, depth);

let mesh = new THREE.Mesh(cubeGeo, mat);

mesh.position.copy(position);

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.box = mesh;

}

class SphereActor { // 球

constructor(position) {

let mat = new THREE.MeshPhysicalMaterial({

color: "#9f2456",

roughness: 0.3,

metalness: 1,

side: THREE.DoubleSide,

});

let radius = 20;

let sphereGeo = new THREE.SphereGeometry(radius);

let mesh = new THREE.Mesh(sphereGeo, mat);

mesh.position.copy(position);

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true;// 允许接收阴影

this.sphere = mesh;

}

class CylinderActor { // 圆柱体

constructor(position) {

let mat = new THREE.MeshStandardMaterial({

color: "#983754",

roughness: 0.5,

metalness: 1,

side: THREE.DoubleSide,

});

let radiusTop = 15;

let radiusBottom = 20;

let height = 30;

let topSegments = 15;

let bottomSegments = 20;

let cylinderGeo = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, topSegments, bottomSegments);

let mesh = new THREE.Mesh(cylinderGeo, mat);

mesh.position.copy(position);

mesh.castShadow = true; // 允许投射阴影

mesh.receiveShadow = true; // 允许接收阴影

this.cylinder = mesh;

}

class SpriteActor { // 精灵体

constructor(position) {

let texture = new THREE.TextureLoader()

.load('http://localhost:63342/HelloHtml/walt/godie.png');

let mat = new THREE.SpriteMaterial({

color: "#ff00ff",

map: texture,

});

// 永远正对相机平面

let _sprite = new THREE.Sprite(mat);

_sprite.position.copy(position);

_sprite.scale.set(50, 50, 1);

this.sprite = _sprite;

}

class AmbientLightManager {

constructor() {

// 环境光

// 均匀的照亮场景中的所有物体，影响整个场景。

// 它没有方向，不能投射阴影。

let ambientcolor = "#ff49f3";

this.light = new THREE.AmbientLight();

this.light.color.set(ambientcolor);

}

class HemisphereLightManager {

constructor() {

// 半球环境光

// 产生从天空光线颜色到地面光线颜色的渐变效果。影响某些材质。

// 不产生投影。

// 可模拟在户外场景中的反光效果。

let skyColor = "#ff0000";

let groundColor = "#0000ff";

let intensity = 0.8;

this.light = new THREE.HemisphereLight(skyColor, groundColor, intensity);

this.light.position.set(120, 50, 150);

// 半球光的图例

let size = 10;

this.lightHelper = new THREE.HemisphereLightHelper(this.light, size, groundColor);

}

class DirectionalLightManager {

constructor() {

// 平行光

// 类似比较强烈的日光，任何地方的强度都是一样的。

// 可以产生投影（投影有范围，且须要被renderer和物体的支持）。

let color = "#009f00";

let intensity = 1;

this.light = new THREE.DirectionalLight(color, intensity);

this.light.position.set(300, 200, 150); // 光线从哪个方向来

this.light.target.position.set(300, 0, 150); // 射向哪里

// 平行光图例

this.lightHelper = new THREE.DirectionalLightHelper(this.light);

this.lightHelper.lightPlane.scale.set(20, 20, 20); // 光源图例的大小

this.lightHelper.lightPlane.material.color.set(color); // 光源图例的颜色

this.lightHelper.targetLine.lookAt(new THREE.Vector3(300, 0, 150));

this.light.castShadow = true; //【开启产生投影】

this.light.shadow.camera.visible = true; // 以下设置投影

let d = 300;

this.light.shadow.camera.left = -d; // 产生的范围。如果物体只有部分在这个空间，影子也只有部分。

this.light.shadow.camera.right = d;

this.light.shadow.camera.top = d;

this.light.shadow.camera.bottom = -d;

this.light.shadow.camera.far = 500; // 超过这个距离没有影子

this.light.shadow.bias = -0.01; // 偏差率

this.light.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

this.light.shadow.mapSize.width = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

// 投影图例

this.lightCameraHelper = new THREE.CameraHelper(this.light.shadow.camera);

}

class SpotLightManager {

constructor() {

// 聚光灯光源

// 类似手电筒，会形成一种锥形效果的光。

// 可以产生阴影。

let color = "#00ff00"; // 颜色的,默认0xffffff(white).

let intensity = 1; // 光照强度，默认1.

let distance = 0; // 光线逐渐衰减到此距离消失。默认0，不衰减。

let angle = Math.PI / 3; // 光源的散射角度默认为夹角90度的Math.PI/2.

// let penumbra = 0; // 光影聚焦的百分比0-1之间，默认值为0，会产生锯齿.

// let decay = 1; // 光在距离上的强度.

let spotLight = new THREE.SpotLight(color, intensity, distance, angle);

spotLight.position.set(-100, 200, 20);

this.light = spotLight;

// 光源图例

this.lightHelper = new THREE.SpotLightHelper(spotLight, color);

this.lightHelper.cone.material.color.set(color); // 光源图例的颜色

spotLight.castShadow = true; // 【开启产生投影】

spotLight.shadow.camera.visible = true; // 投影设置

spotLight.shadow.camera.near = 1;

spotLight.shadow.camera.far = 500; // 阴影最长投射距离

spotLight.shadow.camera.fov = angle * 90; // 摄像机视锥体垂直视野角度。仅辅助看影子的far，没实际影响

spotLight.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

spotLight.shadow.mapSize.width = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

// 投影图例

this.lightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);

}

class CameraManager {

constructor(canvas) {

let aspect = canvas.width / canvas.height;

let _camera = new THREE.PerspectiveCamera(60, aspect, 1, 1500);

_camera.position.set(300, 200, 400);

_camera.lookAt(0, 5, 0);

let _controls = new THREE.OrbitControls(_camera, canvas);

_controls.target.set(0, 5, 0);

this.camera = _camera;

}

class Cinema {

constructor() {

let canvas = document.getElementById('canvas');

canvas.width = 800;

canvas.height = 350;

this.renderer = new THREE.WebGLRenderer({canvas});

this.renderer.shadowMap.enabled = true; // 【渲染阴影】

this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // PCFSoftShadowMap 影子边缘柔和，基于像素。分辨率低时无效果。

let cameraManager = new CameraManager(canvas);

this.camera = cameraManager.camera;

this.scene = new THREE.Scene();

let axes = new THREE.AxesHelper(500);

this.scene.add(axes);

let mbplaneActor = new MeshBasicPlaneActor();

this.scene.add(mbplaneActor.plane);

let mlplaneActor = new MeshLambertPlaneActor();

this.scene.add(mlplaneActor.plane);

let mpplaneActor = new MeshPhongPlaneActor();

this.scene.add(mpplaneActor.plane);

let msplaneActor = new MeshStandardPlaneActor();

this.scene.add(msplaneActor.plane);

let mp2planeActor = new MeshPhysicalPlaneActor();

this.scene.add(mp2planeActor.plane);

let ms2planeActor = new MeshShadowPlaneActor();

this.scene.add(ms2planeActor.plane);

for (let i = 1; i < 7; i++) {

let box = new BoxActor(new THREE.Vector3(i * 100 - 50, 50, 50));

this.scene.add(box.box);

let sphere = new SphereActor(new THREE.Vector3(i * 100 - 50, 50, 100));

this.scene.add(sphere.sphere);

let cylinder = new CylinderActor(new THREE.Vector3(i * 100 - 50, 50, 150));

this.scene.add(cylinder.cylinder);

let sprite = new SpriteActor(new THREE.Vector3(i * 100 - 50, 50, 200));

this.scene.add(sprite.sprite);

}

this.scene.add(new AmbientLightManager().light);

let hemisphereLightManager = new HemisphereLightManager();

this.scene.add(hemisphereLightManager.light);

this.scene.add(hemisphereLightManager.lightHelper);

let directionalLightManager = new DirectionalLightManager();

this.scene.add(directionalLightManager.light);

this.scene.add(directionalLightManager.light.target);

this.scene.add(directionalLightManager.lightHelper);

this.scene.add(directionalLightManager.lightCameraHelper);

let spotLightManager = new SpotLightManager();

this.scene.add(spotLightManager.light);

this.scene.add(spotLightManager.lightHelper);

this.scene.add(spotLightManager.lightCameraHelper);

}

render() {

this.renderer.render(this.scene, this.camera);

requestAnimationFrame(this.render.bind(this));

}

</script>

- end

声明

本文由 cuiweiyou 原创，转载请注明出处：http://www.gaohaiyan.com/3124.html

承接App定制、企业web站点、办公系统软件设计开发，外包项目，毕设