Read Anytime Anywhere Easy Ebook Downloads at ebookmeta.

com

Conquering JavaScript: Three.js Sufyan Bin Uzayr

https://ebookmeta.com/product/conquering-javascript-three-
js-sufyan-bin-uzayr/

OR CLICK HERE

DOWLOAD EBOOK

Visit and Get More Ebook Downloads Instantly at https://ebookmeta.com

 Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.

Conquering JavaScript: D3.js Sufyan Bin Uzayr

https://ebookmeta.com/product/conquering-javascript-d3-js-sufyan-bin-
uzayr/

ebookmeta.com

JavaScript Frameworks for Modern Web Development, 2nd

Edition Sufyan Bin Uzayr

https://ebookmeta.com/product/javascript-frameworks-for-modern-web-
development-2nd-edition-sufyan-bin-uzayr/

ebookmeta.com

VuePress Quick Start Guide Sufyan Bin Uzayr

https://ebookmeta.com/product/vuepress-quick-start-guide-sufyan-bin-
uzayr/

ebookmeta.com

Young People with Migrant Parents Oecd Publishing

https://ebookmeta.com/product/young-people-with-migrant-parents-oecd-
publishing/

ebookmeta.com
Growing Up Smith Indian Recipes Every American Will Love
Indian Recipes with Some American Flair 1st Edition Dan
Babel
https://ebookmeta.com/product/growing-up-smith-indian-recipes-every-
american-will-love-indian-recipes-with-some-american-flair-1st-
edition-dan-babel/
ebookmeta.com

Forgotten People, Forgotten Diseases, 3rd Edition Peter J.

Hotez

https://ebookmeta.com/product/forgotten-people-forgotten-diseases-3rd-
edition-peter-j-hotez/

ebookmeta.com

SOLIDWORKS Exercises Learn by Practicing Learn to Design

3D Models by Practicing with these 100 Real World
Mechanical Exercises 2 Edition Cadartifex
https://ebookmeta.com/product/solidworks-exercises-learn-by-
practicing-learn-to-design-3d-models-by-practicing-with-
these-100-real-world-mechanical-exercises-2-edition-cadartifex/
ebookmeta.com

Wills & Estate Planning For Canadians For Dummies, 3rd

Edition Joann Kurtz Jd

https://ebookmeta.com/product/wills-estate-planning-for-canadians-for-
dummies-3rd-edition-joann-kurtz-jd/

ebookmeta.com

Authorizing Early Modern European Women From Biography to

Biofiction 1st Edition James Fitzmaurice

https://ebookmeta.com/product/authorizing-early-modern-european-women-
from-biography-to-biofiction-1st-edition-james-fitzmaurice/

ebookmeta.com
Demand Forecasting Best Practices (MEAP V02) Nicolas
Vandeput

https://ebookmeta.com/product/demand-forecasting-best-practices-
meap-v02-nicolas-vandeput/

ebookmeta.com
 Conquering JavaScript

Have you ever considered how these visuals and games are shown in a web browser? What
technology is at the heart of it? Of course, employing HTML and CSS alone will not be suf-
ficient. Three.js is a free JavaScript toolkit for displaying images, 3D, and 2D objects in web
browsers that enables you to render graphics and 3D objects on a canvas in the web browser
using your GPU (Graphics Processing Unit).

Conquering JavaScript: Three.js helps the reader master the Three.js framework for faster and
robust development. The book is a detailed guide that will help developers and coders do
more with Three.js. It covers the basics in brief, and then moves on to more advanced and
detailed exercises to help readers quickly gain the required knowledge.

Key Features:

• Examines JavaScript specific content, with emphasis on graphics libraries

• Discusses using Three.js for animated graphic creation

• Provides code optimization tips and solutions

This book is a valuable reference for Three.js developers as well as those involved in game
development, mobile apps, progressive applications, and now even desktop apps.
About the Series

The Conquering JavaScript series covers a wide range of topics, pertain-

ing specifically to the JavaScript programming ecosystem, such as frame-
works and libraries. Each book of this series focuses on a singular topic
and covers the said topic at length, focusing especially on real-world usage
and code-oriented approach, adhering to an industry-standard coding
paradigm, so as to help the learners gain practical expertise that can be
useful for real-world projects.
Some of the key aspects of books in this series are:

• Crystal-clear text, spanning various JavaScript-related topics sorted

by relevance,
• Special focus on practical exercises, with numerous code samples
and programs,
• A guided approach to JS coding, with step-by-step tutorials and
walkthroughs,
• Keen emphasis on real-world utility of skills, thereby cutting the
redundant and seldom-used concepts and bloatware, and
• A wide range of references and resources, to help the readers gain the
most out of the books.

Conquering JavaScript series books assume a basic understanding of cod-

ing fundamentals.
Conquering JavaScript series is edited by Sufyan bin Uzayr, a writer and
educator with over a decade of experience in the computing field. Sufyan
holds multiple degrees and has taught at universities and institutions
worldwide. Having authored and edited over 50 books thus far, Sufyan
brings a wide array of experience to the series. Learn more about his works
at sufyanism.com.

https://w w w.routledge.com/Conquering-JavaScript/book-series/
CRCCONJAV
Conquering JavaScript
Three.js

Edited by
Sufyan bin Uzayr
First edition published 2024
by CRC Press
2385 Executive Center Drive, Suite 320, Boca Raton, FL 33431
and by CRC Press
4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN
CRC Press is an imprint of Taylor & Francis Group, LLC
© 2024 Sufyan bin Uzayr
Reasonable efforts have been made to publish reliable data and information, but the author and
publisher cannot assume responsibility for the validity of all materials or the consequences of their use.
The authors and publishers have attempted to trace the copyright holders of all material reproduced in
this publication and apologize to copyright holders if permission to publish in this form has not been
obtained. If any copyright material has not been acknowledged please write and let us know so we may
rectify in any future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced,
transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or
hereafter invented, including photocopying, microfilming, and recording, or in any information
storage or retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, access www.copyright.com
or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923,
978-750-8400. For works that are not available on CCC please contact mpkbookspermissions@tandf.co.uk
Trademark Notice: Product or corporate names may be trademarks or registered trademarks and are
used only for identification and explanation without intent to infringe.

Library of Congress Cataloging‑in‑Publication Data

Names: Bin Uzayr, Sufyan, editor.

Title: Three.js / edited by Sufyan bin Uzayr.
Description: First edition. | Boca Raton : CRC Press, 2024. | Series:
Conquering Javascript
Identifiers: LCCN 2023006778 (print) | LCCN 2023006779 (ebook) | ISBN
9781032413105 (hardback) | ISBN 9781032412719 (paperback) | ISBN
9781003357445 (ebook)
Subjects: LCSH: Three.js. | Software frameworks. | Application program
interfaces (Computer software) | Computer graphics--Computer programs. |
Three-dimensional imaging. | Web site development. | JavaScript
(Computer program language)
Classification: LCC QA76.76.T58 T47 2024 (print) | LCC QA76.76.T58
(ebook) | DDC 005.2/762--dc23/eng/20230524
LC record available at https://lccn.loc.gov/2023006778
LC ebook record available at https://lccn.loc.gov/2023006779

ISBN: 9781032413105 (hbk)

ISBN: 9781032412719 (pbk)
ISBN: 9781003357445 (ebk)

DOI: 10.1201/9781003357445

Typeset in Minion
by KnowledgeWorks Global Ltd.
For Dad
Contents

About the Editor, xvi

Acknowledgments, xvii
Zeba Academy – Conquering JavaScript, xviii

Chapter 1   ◾    Introduction 1

CRASH COURSE WITH Three.js 2
WHAT IS Three.js? 2
FLASHBACK ABOUT Three.js 4
WHY DO WE EMPLOY Three.js? 4
HOW DO YOU INCORPORATE Three.js 5
WHAT IS REQUIRED TO RUN A Three.js APPLICATION? 7
A Computer 7
Three.js Developer 7
An Editor for Text 7
Web Browser 8
Web Server 8
The Developer Console for the Browser 8
WebGL-Supported Device 9
Three.js USERS – THREE EXAMPLES 9
Advantages 10
Disadvantages 10
CORE CONCEPT 11
ADAPTIVE DESIGN 12

vii
viii   ◾    Contents

HANDLING HIGH-RESOLUTION DISPLAYS 16

Prerequisites 18
Modules es6 18
UNDERSTAND HOW CLOSURES WORK 19
LEARN HOW THIS FUNCTIONS 19
ES5/ES6/ES7 Stuff 20
Use for(elem of Collection) 20
WHEREVER POSSIBLE, UTILIZE FOR EACH, MAP,
AND FILTER 20
Employ Destructuring 21
Function Arguments Can Also Be Destructed 21
Use the Spread Operator and the Rest Parameter 22
Or Clone an Array 22
Or Combining Objects 23
Employ Class 23
Recognize Getters and Setters 23
When Possible, Use Arrow Functions 23
Use Literals from Templates 23
Learn How to Code in JavaScript 24
Visual Studio Code Is a Good Option 24
Setup 25
Stop or Quit Servez to Stop Serving 25
Installation 25
Install Using npm 26
CDN Installation or Static Hosting 26
CommonJS Imports Are Compatible 27
Node.js 27
Check for WebGL Compatibility 27
How to Manage Local Operations 28
External Files Are Used to Load Content 28
A Remote Server 28
 Contents   ◾    ix

Servez 29
A Five-Server Node.js 29
Http-Server in Node.js 29
Server in Python 29
Ruby Server 30
Lighttpd 30
IIS 30
FUNDAMENTALS 31
Primitives 31
Box Geometry 31
Flat Circle 31
Solid Cone 32
Cylinder 32
dodecahedron 33
Two Dimension (2D) 33
2D Disc with the Hole in Center 34
Text Geometry 34
Edge Geometry 34
WireframeGeometry 35
Scene Graph 36
MATERIALS 43
TEXTURES 45
Hello Texture 45
Texture Loading Made Simple 45
A Texture Is Being Loaded 45
Textures from Other Sources Are Being Loaded 46
MEMORY UTILIZATION 46
PNG versus JPG 46
TEXTURE REPETITION, OFFSET, ROTATION, AND
WRAPPING 47
Lights 48
x   ◾    Contents

AmbientLight 49
HemisphereLight 50
DirectionalLight 50
PointLight 51
SpotLights 51
RectAreaLight 51
CAMERAS 51
Shadows 52
BufferGeometry Custom 52
KEY FEATURES OF Three.js 52
Effects 53
Scenes 53
Animation 53
Mesh Creation 53
Scaling 53
Render 53
Within Three.js, You Can Track Rendering Performance 54
Materials 54
Properties of Common Objects 54
RECAP OF BASICS 54
SUMMARY 55
NOTES 56

Chapter 2   ◾    Application Development I 57

BUILDING APPS WITH Three.js 58
DESIGNING GAME WITH Three.js 58
CODE TUTORIALS 59
Creating a Feeling of Motion 59
WITHIN BOUNDED CONSTRAINTS, INFINITE MOVEMENT 59
CONFIGURE THE GAME PROJECT 60
ADDITION OF WEBPACK FILES 61
 Contents   ◾    xi

TYPESCRIPT ENVIRONMENT CONFIGURATION 64

SETTING THE TONE FOR THE GAME 65
Setting the Stage 65
IMAGINING THE SKY 69
FINAL SCENE PLANNING 70
INCLUDING GAMEPLAY LOGIC 74
INPUT THROUGH KEYBOARD 74
INPUT VIA TOUCHSCREEN 75
OBJECTS IN OUR SCENE THAT ARE MOVING 76
detectCollisions 78
addBackgroundBit 84
addChallengeRow 84
THE FINAL TOUCHES TO OUR RENDER LOOP 86
UI DESIGN FOR THE GAME 87
SUMMARY 89
NOTES 89

Chapter 3   ◾    Application Development II 91

BUILDING APPS WITH Three.js 93
Installing and Downloading 93
Code Tutorial 93
Initial HTML Configuration 93
Our 3D World Is Being Built 94
SETTING UP A DEVELOPMENT SERVER ON THE LOCAL
MACHINE 96
For Windows Users 96
For Mac 96
DRAWING GEOMETRY AND RESIZING THE VIEWPORT 96
RESIZING THE VIEWPORT UPDATE 99
IMPORTING THE BUSINESS PLAN 100
THE STARTER PROJECT LAYOUT 100
xii   ◾    Contents

SELECTING 3D MODELS 100

3D MODELS LOADING 101
IMPORTANT 3D DEVELOPMENT ADVICE 101
SUMMARY 102
NOTES 102

Chapter 4   ◾    Application Development III 103

BUILDING APPLICATION WITH Three.js 104
CODE TUTORIAL 104
Base 105
Let Us Add Our Environment! 105
Skies 106
Animation 107
Reconfigure 107
Background 108
THE PATHWAY TO THE GARDEN’S GATE 108
Algorithm 108
Sharing 109
Cropping 109
Symbol Picking 110
Meta Security 115
SPOTIFY IS ELEVATING THE LEVELS OF
SEROTONIN OF GIRL IN RED FANS 115
Algorithm 116
Image Generation 116
Loader 117
USING SPOTIFY’S TOP RECENT STREAMED TRACKS TO
DETECT AND ENCOURAGE A FAN’S AFFINITY 119
Get a User’S Favorite Songs 119
Algorithm 119
Leaderboard 120
Design and Development of Components 120
 Contents   ◾    xiii

Loader of Faith 121

Progress in Faith 123
SUMMARY 125

Chapter 5   ◾    Code Optimization 127

WRITING OPTIMIZED AND EFFICIENT CODE 127
BEFORE YOU BEGIN MEASURING RESULTS 127
Selecting a Web Browser 128
The Amount of Polygons in the Scene Is Being Reduced 128
Anti-Aliasing Is Disabled 128
LIMITING THE RESOLUTION OF 3D RENDERING 129
Three.js OPTIMIZES A LARGE NUMBER OF OBJECTS 130
OPTIMIZE A LARGE NUMBER OF ANIMATED OBJECTS 139
HARDENING AND SECURITY 156
XSS Reflection 156
XSS Cache 157
Protect Your Code 158
Encoding the Output 158
Web Page Contexts for Output Encoding 159
Beginner Friendly Advice or Assistance Why Am I Unable
to See Anything?# 160
GENERAL TIPS 161
WORK IN SI UNITS 162
SI Units 162
Accurate Colors 162
JavaScript 163
Use linter# and a Style Guide 163
MODELS, MESHES, AND VISIBLE OBJECTS 163
Camera 164
Renderer 164
Lights 164
Switch on the Renderer 165
xiv   ◾    Contents

Shadows 165
Materials 165
CUSTOM MATERIALS 165
Geometry 165
Textures 166
Anti-Aliasing 166
Postprocessing 166
ARE YOU GETTING RID OF SOMETHING
FROM YOUR SCENE? 166
Set Object in Performance 167
Advanced Tips 168
SUMMARY 168
NOTES 168

Chapter 6   ◾    Summary 169

CAREER PROSPECTS USING Three.js169
USING Three.js WITH OTHER FRAMEWORKS
AND LIBRARIES 170
WHAT IS TYPESCRIPT? 171
AN INTRODUCTION TO REACT AND Three.js171
GETTING STARTED WITH REACT-THREE-FIBER 171
DEVELOPING A REACT 3D LUDO DICE PROTOTYPE
WITH ANIMATIONS 172
COMPONENT FOR BOX CONSTRUCTION 172
RENDERING 3D LUDO DICE BOX 175
Ambient Light 175
Spot Light 176
pointLight176
ANGULAR SCENE USING Three.js177
Three.js SCENE PROGRAMING 178
Why Are We Moving the Camera Around? 179
What Is the Definition of Geometry? 179
 Contents   ◾    xv

MATERIAL MANAGEMENT 179

Positioning a Mesh (Cube in Our Case) 180
With Vue.js and Three.js, You Can Create Stunning
Sceneries180
Features180
Creating a Declarative Scene 181
Organize Your Resources 182
Models182
Developing Unique Content 183
SUMMARY183
NOTES184
REFERENCES184

BIBLIOGRAPHY, 185

INDEX, 187
About the Editor

Sufyan bin Uzayr is a writer, coder, and entrepreneur with over a decade of
experience in the industry. He has authored several books in the past, per-
taining to a diverse range of topics, ranging from History to Computers/
IT.
Sufyan is the Director of Parakozm, a multinational IT company spe-
cializing in EdTech solutions. He also runs Zeba Academy, an online
learning and teaching vertical with a focus on STEM fields.
Sufyan specializes in a wide variety of technologies, such as JavaScript,
Dart, WordPress, Drupal, Linux, and Python. He holds multiple degrees,
including ones in Management, IT, Literature, and Political Science.
Sufyan is a digital nomad, dividing his time between four countries. He
has lived and taught in numerous universities and educational institutions
around the globe. Sufyan takes a keen interest in technology, politics, lit-
erature, history, and sports, and in his spare time, he enjoys teaching cod-
ing and English to young students.
Learn more at sufyanism.com

xvi
Acknowledgments

There are many people who deserve to be on this page, for this book would
not have come into existence without their support. That said, some names
deserve a special mention, and I am genuinely grateful to:

• My parents, for everything they have done for me.

• The Parakozm team, especially Divya Sachdeva, Jaskiran Kaur, and
Simran Rao, for offering great amounts of help and assistance during
the book-writing process.
• The CRC team, especially Sean Connelly and Danielle Zarfati, for
ensuring that the book’s content, layout, formatting, and everything
else remain perfect throughout.
• Reviewers of this book, for going through the manuscript and pro-
viding their insight and feedback.
• Typesetters, cover designers, printers, and everyone else, for their
part in the development of this book.
• All the folks associated with Zeba Academy, either directly or indi-
rectly, for their help and support.
• The programming community in general, and the web development
community in particular, for all their hard work and efforts.

Sufyan bin Uzayr

xvii
Zeba Academy –
Conquering JavaScript

The “Conquering JavaScript” series of books are authored by the Zeba

Academy team members, led by Sufyan bin Uzayr, consisting of:

• Divya Sachdeva
• Jaskiran Kaur
• Simran Rao
• Aruqqa Khateib
• Suleymen Fez
• Ibbi Yasmin
• Alexander Izbassar

Zeba Academy is an EdTech venture that develops courses and content for
learners primarily in STEM fields and offers educational consulting and
mentorship to learners and educators worldwide.

Additionally, Zeba Academy is actively engaged in running IT Schools in

the CIS countries and is currently working in partnership with numerous
universities and institutions.

For more info, please visit https://zeba.academy

xviii
 Chapter 1

Introduction

IN THIS CHAPTER

➢➢ Basic about Three.js

➢➢ Features of Three.js
➢➢ Advantages and Disadvantages

This chapter includes an introductory part that will explore the basic and
core concepts related to Three.js. It will also talk about the advantages and
disadvantages of Three.js.
Every year, web browsers become more powerful, have more capabil-
ities, and perform better. Browsers have grown as a terrific platform for
creating immersive, complicated, and beautiful applications in recent
years. Modern HTML5 technologies like web sockets, local storage, and
advanced CSS approaches for styling are used in the majority of cur-
rent applications. Most recent browsers, on the other hand, support a
technology that may be utilized to produce stunning 3D images and
animations that take full advantage of the GPU (graphics processing
unit). WebGL is the name of the technology, which is supported by the
most recent versions of Firefox, Chrome, Safari, and Internet Explorer.
You may use WebGL to create 3D sceneries that run in your browser
without the use of any plugins. This standard has a lot of support on the
desktop and most recent devices and mobile browsers fully support it.
To make WebGL apps, you’ll need to learn a new language called GLSL

DOI: 10.1201/9781003357445-1 1
2   ◾    Conquering JavaScript: Three.js

and grasp how to use vertex and fragment shaders to render your 3D
geometries.
Fortunately, there are several JavaScript libraries that wrap the WebGL
internals and give a JavaScript API that you may use without having to
comprehend WebGL’s most complicated capabilities. Three.js is one of the
most developed and feature-rich of these libraries.
Three.js was founded in 2010 and offers a huge variety of simple APIs
that expose all of Three.js’ functionality, allowing you to quickly create
complex 3D scenarios and animations in your browser.
Three.js’ APIs allow you to do pretty much anything you want with it.

CRASH COURSE WITH Three.js

Have you ever considered how these visuals and games are shown in a
web browser? What technology is at the heart of it? Of course, employing
HTML and CSS alone will not be sufficient. This task was previously com-
pleted with WebGL. WebGL (Web Graphics Library) is a JavaScript API
that allows you to render three-dimensional objects, two-dimensional
objects, and graphics in your browser. Users can engage with interactive
information on webpages using the WebGL API without having to down-
load or install any plug-ins. WebGL allows developers to access hardware
at a low level using the OpenGL ES code format.
Mozilla Organization invented WebGL. With all of these advantages,
WebGL also has certain disadvantages, which has led to the introduction
of a free JavaScript toolkit called Three.js. WebGL is a very simple technol-
ogy that simply renders basic objects such as points, squares, and lines.
You’ll need a lot of code to do anything serious with WebGL, which is
where Three.js comes in.

WHAT IS Three.js?
Three.js is a free JavaScript toolkit for displaying images, 3D, and 2D
objects in web browsers. Behind the scenes, it leverages WebGL API. Three.
js enables you to render graphics and 3D objects on a canvas in the web
browser using your GPU. We can also interact with other HTML compo-
nents because we are utilizing JavaScript. In April 2010, Ricardo Cabello,
computer graphics programmer from Barcelona launched Three.js.
Three.js can be downloaded and the documentation can be found at
https://threejs.org. Because it includes numerous examples and support
materials, the download is fairly huge. Three.js’ primary functionalities
 Introduction   ◾    3

are defined in a single huge JavaScript file called “Three.js,” which can be
found in the Three.js download’s build directory.

Preview for Three.js download directory.

This version is compatible with both modular and nonmodular appli-

cations. Three.min.js, a smaller “minified” version, provides the same
definitions in a format that isn’t intended to be human-readable. You may
utilize Three.js on a web page by including either script in the script>
4   ◾    Conquering JavaScript: Three.js

element. If three.min.js is in the same folder as the web page, for example,
the script element would be

<script src="three.min.js"></script>

The Three.js download also includes a directory with many examples

and a number of support files that are used in the examples. Many capa-
bilities not included in the core of Three.js are used in the examples. These
add-ons can be found in the download in the js folder under the examples
folder (or in a folder named jsm for the modular versions).

FLASHBACK ABOUT Three.js

Let’s go back to the 1990s, when watching videos on the Internet was a
pipe dream. Chronos Group, a nonprofit organization, was working on
OpenGL (open graphics library) to provide visuals on the web. Mozilla
released a web graphics library in 2006 that enabled users to use JavaScript
to access their computer’s GPU and run motion graphics over the web.
Previously, most things were done in C and C+, and you needed to deal
with OpenGL or DirectX, but WebGL now allows users to perform the
same thing in JavaScript, a more current and robust programming lan-
guage. You only needed an html canvas element. Now is the time for
interactive video experiences on the Internet. This is when Mr. Dube or
Ricardo Cabello entered the room. Three.js is a new JavaScript library that
improves WebGL’s capabilities and allows for interactive video. It pro-
vides a cutting-edge API that allows developers like us to quickly create
3D experiences and deploy them on the web.

WHY DO WE EMPLOY Three.js?

There are many reasons to use it; few are mentioned below:

• Because Three.js is open source, we can readily inspect the source

code and discover how it works (functions).
• When we utilize WebGL for graphics, it doesn’t work with the major-
ity of browsers; however, Three.js does.
• The code does not require any third-party plugins to run.
• Only one programming language, JavaScript, and, of course, HTML,
are required.
 Introduction   ◾    5

HOW DO YOU INCORPORATE Three.js

There are a variety of ways to include Three.js into projects; some are
straightforward, while others are more involved; nonetheless, they all
require us to include one of the following files in our project:

• Three.js,
• three.min.js, and
• three.module.js.

These are all available on the Three.js GitHub website.

Preview of GitHub website for Three.js.

Approach 1: (download the entire Three.js project): The simplest method

is to simply download the entire Three.js project to your computer and use
the files from there. The newest version of Three.js can be found on its
GitHub page. When you’ve finished downloading it, open it and search
within the build folder for the three scripts.
Approach 2: (using NPM or YARN, install the Three.js package): On NPM,
Three.js is also accessible as a package. This implies that if your computer has
Node.js and NPM installed, you can open a command line and type:

npm i three

Then, by referring to the three packages, you may import Three.js from
the three.module.js file into your JavaScript file: (“Introduction to Three.
js – GeeksforGeeks”)

import * as THREE from "three";

6   ◾    Conquering JavaScript: Three.js

You may also add the package using the following command in the
terminal window if you prefer Yarn to NPM:

Three add yarns

Approach 3: (via CDN Link): A CDN (content delivery network) is a

remote site dedicated to storing files for use in a website.
In reality, the Three.js.org site can be used as a CDN. You may use this
link to link it to the Three.js file and include it in your HTML like this:
https://threejs.org/build/three.js

<script src="https://threejs.org/build/three.js">
</script>

However, there is a problem with using the three.js.org CDN URL

because you will always be working on the most recent version. When
we’re in development mode, it is fine, but when we’re talking about pro-
duction, it’s not.
If any function or syntax changes with the update, your code will stop
working. Instead, we recommend using CDN from these sites:

• cdnjs.com
• www.jsdelivr.com

Preview of cdnjs website for CDN URL Three.js.

 Introduction   ◾    7

Preview of jsdelivr website for CDN URL Three.js.

WHAT IS REQUIRED TO RUN A Three.js APPLICATION?

We’ll go over the hardware and software you’ll need to construct and
run a Three.js app in this section, as well as introduce a few fundamental
ideas.

A Computer
First and foremost, you will require a computer; but it does not need to be
fast, fancy, or equipped with a strong graphics card. It might be better to
have a slow PC with a bad GPU because you’ll be able to experience your
programs the same way the majority of your users do.

Three.js Developer
As a Three.js developer, you’ll require a basic understanding of HTML and
CSS, as well as some JavaScript. You do not have to be a professional in any
of these fields, though.

An Editor for Text

Text editing software will be required. VSCode is the most popular web
development editor, followed by Atom and Sublime Text. These editors
let you to install plugins such as linters and formatters that verify your
code style as you type, and if you install enough plugins, the editor
will crash, giving you something that looks and feels like a full-featured
IDE.
8   ◾    Conquering JavaScript: Three.js

Web Browser
Almost any online browser can execute Three.js, and the percentage of
outdated browsers that can’t is small and shrinking fast. You can even run
a Three.js app on Internet Explorer 9, which was published in 2011 and
only accounts for less than 0.1% of all web users at the time of writing this
chapter. The majority of people nowadays use a modern browser to access
the Internet, so browser support isn’t a concern.
You can also run Three.js programs in a variety of exotic settings, such
as Node.js, Electron.js, or React Native; however, this requires some effort
and is beyond the scope of this book. We’ll concentrate on using modern
web browsers like Firefox, Chrome, Edge, and Safari to execute your app.

Web Server
Any JavaScript mentioned in an HTML file will run when opened directly
in a web browser. This is how many simple Three.js examples work. Due
to browser security restrictions, you cannot load graphics or 3D models
without first setting up a web server. You need to establish a local devel-
opment server if you wish to run a Three.js scene with assets like mod-
els or textures. All of the examples in this book use a fancy custom-built
inline code editor within the page to bypass this requirement, but you’ll
need to set up a server once you start constructing your own apps. Many
simple web servers for development are available. These are simple to put
up; however, they can only accommodate a small number of simultaneous
visitors. They are, nevertheless, ideal for testing your work locally before
publishing it. When you’re ready to launch your website, you’ll switch to a
high-performance production server like Apache or Nginx (pronounced
engine-x, apparently).
These can accommodate hundreds or even millions of simultaneous
visitors to your site, but they are difficult to set up. Fortunately, there are
numerous web hosting businesses that can handle this for you. When
you’re ready to set up a development server, consult the Three.js docu-
mentation’s how to run things locally guide, which contains a wealth of
information on the subject.

The Developer Console for the Browser

Your code will eventually cease working, and you’ll need to discover
out why. Debugging techniques are used to do this. The browser devel-
oper console is the simplest fundamental debugging technique in web
 Introduction   ◾    9

development, and it’s typically the only one you’ll need. Every major
browser includes one, which you can normally access by using the F12 key.

WebGL-Supported Device
WebGL is a programmable interface, or JavaScript API, for generating
dynamic 2D and 3D graphics in web pages. WebGL connects your web
browser to your device’s graphics hardware, giving you significantly more
graphical processing power than a standard website can offer.
WebGL is utilized by Three.js to display 3D visuals, but it can also be
used for 2D graphics, as in Alexander Perrin’s wonderful Short Trip, or
even General Purpose GPU computing, as in these flocking behavior and
protoplanetary examples.
To use WebGL, you’ll need a compatible device and browser. This was
once something to be concerned about, but nowadays you can assume that
all devices support WebGL and that every current smartphone, tablet, PC,
laptop, and even smartwatch has a graphics card capable of executing a
simple 3D scene. According to caniuse.com and webglstats.com, roughly
98% of Internet users use WebGL-compatible devices at the time of writ-
ing this chapter. If you do need to support the last 2%, the WebGL com-
patibility check explains how to deliver a fallback or warning message to
users whose devices don’t support WebGL.

Three.js USERS – THREE EXAMPLES

Let’s have a look at some of the websites that use Three.js to build 3D web
experiences.

• Bruno Simon’s website is the first. Bruno is a smart developer and a

creative coder who specializes in Three.js. On his website’s homep-
age, you can simply drive about in a car. You can move it around and
even bowl with it.
• Mozilla Hubs, a Metaverse-like experience, is the next 3Ds experi-
ence to be shown. It can invite others into a coworking space and
conduct virtual meetings in a 3D environment. You can move about,
customize stuff, and invite people here. As long as they have the
meeting room’s ID, they can join you in this 3D experience. Let’s
import this shoe into the room and add it to the library. You may
now move it around and do other things with it.
10   ◾    Conquering JavaScript: Three.js

• Spline Design’s website is designed entirely with Three.js. If you’re a

software developer or product manager, you’ve most likely used figma
to design objects. This tool is similar to figma; however, it works in three
dimensions. Everything in this section is designed for 3D creators.

This is a great illustration of how Three.js can be used to not only create
virtual experiences but also to construct businesses based on 3D design.

Advantages
We have now learned a lot about the Three.js; so here are few advantages
that are mentioned below:

• Easy to learn: is that it’s very easy to get started with.

• There are numerous examples: Because of its widespread use, there
are numerous examples to help you get started.
• A large population: Three.js has a large community of developers
working with and building third-party solutions as a result of its
popularity.
• Excellent documentation: Three.js offers comprehensive documen-
tation, which is usually an indicative of a quality library.
• Excellent performance: Three.js outperforms other libraries in
terms of performance.
• PBR rendering was used: Three.js includes PBR rendering, which
improves the accuracy of graphics rendering.

Disadvantages
Three.js is associated with few disadvantages that are mentioned below:

• No pipeline for rendering: As a result, many recent rendering tech-

niques are impossible or impractical to use with three. Js.
• This isn’t a game engine: You won’t find many features here that
aren’t related to rendering.
• Designed for beginners: Many advanced capabilities are concealed
because the API is designed for beginners.
 Introduction   ◾    11

• Lack of Support: There is no pre-built-in support for spatial index-

ing, accurate raycasting, or frustum culling, and collision detection
in complex circumstances is hideously wasteful.

CORE CONCEPT
Three.js is a free JavaScript library that lets you create and render three-
dimensional scenarios right in your browser. Three.js has a big collec-
tion of functions and a rich API for this. Three.js is a 3D toolkit that
aims to make displaying 3D material on a webpage as simple as pos-
sible. Three.js’ source code is available on a GitHub repository. JavaScript
can be used to create GPU-accelerated 3D animations. Three.js is fre-
quently confused with WebGL since it frequently, but not always, uses
WebGL to draw 3D. WebGL is a low-level graphics system that can only
draw points, lines, and triangles. To achieve anything worthwhile with
WebGL, you’ll almost always need a lot of code, which is where Three.js
comes in. Scenes, lights, shadows, materials, textures, and 3d math are
all handled by it, which you’d have to code yourself if you used WebGL
directly.
Let’s start by trying to give you an understanding of how a Three.js
project is structured. A Three.js project necessitates the creation of a num-
ber of objects and their connections.

• A renderer exists. This is arguably Three.js’ most important object.

When you give a Renderer, a Scene, and a Camera, it renders (draws)
the piece of the 3D scene that is inside the camera’s frustum as a 2D
image to a canvas.
• A scenegraph is a tree-like structure made up of different items such
as a Scene object, numerous Mesh objects, Light objects, Group,
Object3D, and Camera objects. A Scene object is the scenegraph’s
root and contains attributes such as the backdrop color and fog.
These objects represent where things appear and how they are posi-
tioned in a hierarchical parent/child tree-like structure. In relation
to their parents, children are positioned and oriented. The wheels on
a car, for example, could be considered children of the automobile,
meaning that moving and orienting the car’s object automatically
moves the wheels. More information is available in the scenegraphs
article.
12   ◾    Conquering JavaScript: Three.js

• Drawing a given Geometry with a specific Material is represented

by Mesh objects. Multiple Mesh objects can make use of both
Material and Geometry elements. For example, to describe the
position and orientation of two blue cubes in distinct locations,
we might need two Mesh objects. Only one Geometry would be
required to store the vertex data for a cube, and only one Material
would be required to indicate the color blue. The same Geometry
object and Material object could be referenced by both Mesh
objects.
• Geometry objects represent the vertex data of a sphere, cube,
plane, dog, cat, human, tree, building, or other piece of geometry.
(“Fundamentals – Three.js”) Three.js includes a wide range of geom-
etry primitives. You can also load geometry from files and generate
custom geometry.
• Material objects represent the surface qualities that are used to ren-
der geometry, such as the color and opacity. A Material can also
point to one or more Texture objects, which can be used to wrap an
image around the surface of a geometry, for example.
• Images loaded from picture files, produced from a canvas, or dis-
played from another scene are all examples of texture objects.
• Different types of lighting are represented by light objects.

ADAPTIVE DESIGN
It will teach you how to make your Three.js app respond to any cir-
cumstance. Making a webpage responsive means that it works effec-
tively on a variety of screen sizes, from computers to tablets to phones.
There are even more scenarios to explore with Three.js. We might want
to handle a 3D editor with controls on the left, right, top, or bottom,
for example. Another example is a live diagram in the center of a docu-
ment. We used a plain canvas with no CSS and no size in the previous
example.

<canvas id="c"></canvas>

The default canvas size is 300 × 150 CSS pixels. CSS is the recommended
method for setting the size of something on the web platform.
 Introduction   ◾    13

Let’s use CSS to make the canvas fill the page.

<style>
html, body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
}
</style>

The default margin in HTML is 5 pixels; therefore, setting the margin

to 0 removes the margin. When the html and body heights are set to 100%,
they occupy the entire window. They are only as big as the information
that fills them otherwise.
The id = c element is then told to be 100% the size of its container, which
in this case is the document’s body.
Finally, we changed the mode of display to block. The default dis-
play mode for a canvas is inline. Inline elements can result in more
whitespace being displayed. Setting the canvas to block solves the
problem. The result can be visualized on result page.1 As you visual-
ize the results, we may notice the canvas has now completely filled the
page; however, there are two issues. Our cube has been stretched. They
resemble boxes rather than cubes. It’s either too tall or too wide. Resize
the example by opening it in its own window. You’ll see how the cubes
become wider and taller.
The second issue is that they appear in low resolution, blocky, and fuzzy.
Extend the window to its maximum size to see the problem clearly.
Let’s start with the stretchable issue. To accomplish so, we need to
match the camera’s aspect ratio to the canvas’s display size. We can do
so by looking at the client Width and client Height attributes of the
canvas.
This is how we’ll update our render loop.

function render(time) {
time *= 0.001;
14   ◾    Conquering JavaScript: Three.js

const canvas = renderer.domElement;

camera.aspect = canvas.clientWidth / canvas.
clientHeight;
camera.updateProjectionMatrix();

The result can be visualized on the page.2 Now let us fix the problem of
blockiness.
There are two sizes of canvas elements. The canvas is presented on the
page in a single size. That’s what CSS allows us to do. The amount of pixels
in the canvas itself is the other size. This is similar to a photograph. For
instance, a 128 × 64-pixel image may be shown as 400 × 200 pixels using
CSS.

<img src="some128x64image.jpg" style="width:400px;

height:200px">

Drawing buffer size refers to the internal size of a canvas, or its resolu-
tion. By executing renderer.setSize in Three.js, we may change the drawing
buffer size of the canvas. Which size should we choose? “The same size as
the canvas depicted” is the most obvious response. Again, we can use the
canvas’s client Width and client Height parameters to do this.
Let’s construct a function that checks if the renderer’s canvas isn’t
already the size it’s being displayed as and sets it to that size if it isn’t.

function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.
height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}

We check to see if the canvas needs to be resized at all. It’s recom-

mended not to resize the canvas if it’s at the size we want. We call renderer.
setSize and send in the new width and height once we know if we need to
resize or not. It’s critical to return false at the conclusion. render.setSize
 Introduction   ◾    15

sets the canvas’s CSS size by default, but this isn’t what we want. We want
the browser to behave as it does for all other elements, which is to utilize
CSS to decide the element’s display size. We don’t want the three canvases
to be different from the other pieces.
If the canvas was resized, our function returns true. We can utilize
this to see if there are any additional items that need to be updated. Let’s
update our render loop to take advantage of the new function.

function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.
clientHeight;
camera.updateProjectionMatrix();
}

We only set the camera’s aspect if resizeRendererToDisplaySize returns

true since the aspect will only change if the canvas’s display size changes.
It should now render with a resolution that corresponds to the canvas’s
display size.3
Let’s take our code and place it in a separate.js file to demonstrate the
point of letting CSS manage the resizing. Here are a couple more examples
where we let CSS pick the size and notice that none of the code had to be
changed to make them function. Let’s place our cubes in the middle of a
sentence.

<p>Data science is a field of study that works with

large amounts of data and uses cutting-edge tools and
techniques to uncover hidden patterns, generate useful
data, and make business decisions. To create
prediction models, data scientists use complicated
machine learning algorithms.
Data for analysis can come from a variety of sources
and be provided in a variety of formats.
Let’s look at why data science is important in today’s
IT market now that you know what it is.<canvas
id="c"></canvas> Data science is a field of study that
works with large amounts of data and uses cutting-edge
tools and techniques to uncover hidden patterns,
16   ◾    Conquering JavaScript: Three.js

generate useful data, and make business decisions. To

create prediction models, data scientists use
complicated machine learning algorithms. Data for
analysis can come from a variety of sources and be
provided in a variety of formats.is.</p>
<script type="importmap">{
"imports": {
  "three": "https://threejs.org/build/three.module.
js"
}
}</script><script type="module" src="https://threejs.
org/manual/examples/threejs-responsive.js"></script>

Here’s the same code in an editor-style layout with a resizable control

box on the right. Important thing to note is that no code has changed.
Only our HTML and CSS were modified.4

HANDLING HIGH-RESOLUTION DISPLAYS

High-density dot per inch displays are referred to as HD-DPI. Most
Macs and many Windows devices, as well as nearly all smartphones,
fall within this category. In the browser, they use CSS pixels to set the
sizes, which are designed to be consistent regardless of the display’s
resolution. The browser will simply produce more detailed text at the
same physical size. With Three.js, you can manage HD-DPI in a variety
of ways.
The first is to do nothing out of the ordinary. It takes a lot of GPU pro-
cessing power to render 3D visuals. Mobile GPUs, as least as of 2018, are
less powerful than desktop GPUs, despite the fact that mobile phones fre-
quently have high-resolution displays. The current top-of-the-line phones
feature a 3× HD-DPI ratio, which means they contain nine pixels for every
pixel from a non-HD-DPI display. That means they’ll have to render nine
times as much.
Because computing 9× the pixels is a lot of work, we’ll merely compute
1× the pixels and the browser will render it at 3× the size (3× by 3× = 9×
pixels) if we leave the code alone. That’s probably what you want for any
heavy Three.js project; otherwise, you’ll have a slow frame rate. However,
if you really want to render at the device’s resolution, there are a couple of
ways to accomplish so in Three.js.
 Introduction   ◾    17

One option is to use renderer to give Three.js a resolution multiplier

setPixelRatio. You ask the browser for the CSS-to-device-pixel multiplier,
which you then send to Three.js.

renderer.setPixelRatio(window.devicePixelRatio);

Any calls to renderer after that. setSize will utilize the size you specified
multiplied by the pixel ratio you specified. This is strictly discouraged. See
what follows. You can also do it yourself while resizing the canvas.

function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const pixelRatio = window.devicePixelRatio;
const width = canvas.clientWidth * pixelRatio
| 0;
const height = canvas.clientHeight * pixelRatio
| 0;
const needResize = canvas.width !== width ||
canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}

The second option is objectively superior. Why? Because that means I

get exactly what I want. When working with Three.js, we frequently need
to know the size of the canvas’s drawing Buffer, for example, while creat-
ing a postprocessing filter or a shader that uses gl FragCoord, taking a
screenshot, reading pixels for GPU picking, drawing into a 2D canvas, and
so on. If we use setPixelRatio in many circumstances, our actual size will
differ from the size we requested, and we’ll have to guess when to use the
size we asked for and when to use the size Three.js actually uses.
We always know the size being used is the size we asked because we
do it ourselves. There isn’t a single instance where magic is taking place
behind the scenes.5 Although it may be difficult to detect, if you have an
HD-DPI display and compare this sample to the ones above, you should
notice the edges are crisper. This article discussed a very basic but impor-
tant subject.
18   ◾    Conquering JavaScript: Three.js

Prerequisites
They assume you’re familiar with JavaScript programming. They pre-
sume you understand the DOM, HTML, and how to build DOM ele-
ments in JavaScript. They assume you’re familiar with es6 modules and
how to utilize them using import and <script type=“module”> tags. They
assume you’re familiar with CSS and know what CSS selectors are. They
also assume you’re familiar with ES5, ES6, and possibly ES7. They assume
you’re aware that JavaScript is only executed via events and callbacks in
the browser. They think you’re familiar with the term “closure.”
Here are some quick reminders and notes.

Modules es6
The import keyword in a script or the <script type=“module”> tag can be
used to load es6 modules inline. Here’s an illustration of both.

<script type="module">
import * as THREE from '../../build/three.module.js';
...
</script>

Absolute or relative paths are required. In contrast to other tags like

<img> and <a> and css references, relative paths always begin with ./ or ../.
More information is available at the bottom section.
document.querySelector and document.querySelectorAll
To choose the first element that matches a CSS selector, use document.
querySelector. All elements that meet a CSS selector are returned by docu-
ment.querySelectorAll.
You do not require onload
Many pages over the last 20 years use HTML.

<body onload="somefunction()"

This is an outmoded style. At the bottom of the page, scripts should be

placed at the bottom.

<html>
<head>
...
</head>
 Introduction   ◾    19

<body>
...
</body>
<script>
// inline javascript
</script>
</html>

Alternatively, you can utilize the defer property.

UNDERSTAND HOW CLOSURES WORK

function a(v) {
const foo = v;
return function() {
return foo;
};
}
const f = a(120);
const g = a(556);
console.log(f()); // prints 120
console.log(g()); // prints 556

The function “an” in the code above produces a new function each time it
is invoked. Over the variable “foo,” that function ends.

LEARN HOW THIS FUNCTIONS

This isn’t a magic trick. It’s essentially a variable that is automatically pro-
vided to functions in the same way that an argument is. To put it simply,
when you call a function directly like

Some function(d, e, f);

When you call a function with the dot operator, this will be null (in
strict mode or in a module). Similar to this.

someobject.somefunction(d, e, f);

This is going to be someobject.

20   ◾    Conquering JavaScript: Three.js

Callbacks are one of the areas where individuals become confused.

const callback = someobject.somefunction;

loader.load(callback);

Because loader.load does not use the dot. operator when calling the
callback, this will be null by default (unless the loader explicitly sets it to
something). You must notify JavaScript that this will be someobject when
the callback occurs by binding it to the function.

const callback = someobject.somefunction.

bind(someobject);
loader.load(callback);6

This function will be explained in here this article.

ES5/ES6/ES7 Stuff
The stuff var in ES5/ES6/ES7 is obsolete. Make use of const and/or let.
There is never a good reason to use var. It’s also considered bad
practice to use it at this time. If the variable will never be reallocated,
which is the case most of the time, use const. In circumstances where
the value changes, use let. This will aid in the prevention of numerous
bugs.

Use for(elem of Collection)

“For of” is new, “for in” is old, never for(elem in collection). “for in” had
issues that “for of” resolved.
For instance, you can iterate over all of an object’s key/value pairs
using:

for (const [key, value] of Object.entries(someObject)) {

console.log(key, value);
}

WHEREVER POSSIBLE, UTILIZE FOR EACH, MAP,

AND FILTER
Arrays introduced the functions for Each, map, and filter and are now
widely used in JavaScript.
 Introduction   ◾    21

Employ Destructuring
Assume an object with the following dimensions: width: 300, height: 150.
Earliest code

const width = dims.width;

const height = dims.height;

New code

const {width, height} = dims;

Arrays can be destructed as well. Consider the following array: const

position = [5, 6, 7, 1];
Old code

const a = position[3];
const b = position[4];

New code

const [, a, b] = position;

Function Arguments Can Also Be Destructed

const dims = {width: 400, height: 250};

const vector = [5, 6];
function lengthOfVector([a, b]) {
return Math.sqrt(a * a + a * b);
}
const dist = lengthOfVector(vector); // dist = 8
function area({width, height}) {
return width * height;
}
const c = area(dims); // c = 55000

Short code used by object declarations

Old code

const width = 400;

const height = 250;
 Another Random Document on
Scribd Without Any Related Topics
 “And what will you be meaning now, Sergeant?”
“Six years ago a family corresponding in numbers and personnel
to your rescued party disappeared from the Windermere Valley,
vanished into space, absolutely into thin air—quite unbelievable, but
actually did, you know. Head’s all terribly up in the air about it.
Reputation of force and all that, you know. Of course, they had a
week’s start. Fellow refused to lay information.”
“Now then, Sergeant, if you will tell me what you are discoursing
upon I will be obliged, but if not you may as well shut your gab,”
said MacKinroy, athirst for news from the outside and annoyed at the
sergeant’s scrappy and wholly unsatisfactory account of what offered
mystery.
“Oh, I beg pardon, MacKinroy. Forgot you were out of it. The
bones of it I’ll give you. Chap, Gaspard by name, rancher, artist,
tangled up with Indian girl—Athabascan chief’s daughter—after his
wife died went dippy, married Indian girl, brought her back to ranch
with two children, both his, youngest blind girl—my clue, see?—
neighbor rancher, Sleeman by name, bad lot, hanging round,
monkeying round with Indian woman, Gaspard and his son, this
young fellow here I fancy, came on the scene, found her fighting off
Sleeman, jumped for his gun, the woman grabbed him to prevent
murder, in the struggle Gaspard was shot, died; woman goes quite
mad, moons round giving out signs of dementia, one night
Sleeman’s house goes up in smoke, Sleeman himself pulled out of
the fire by one of ours with an ugly knife wound in the ribs, at first
charged Indian woman with crime, later refused to make any formal
deposition; same night woman and whole bunch vamoose utterly,
fade off the landscape, trail lost completely. Of course, every Indian
in the North Country sets himself to mix that trail. For two years
search actively carried on, then slacked off—Sleeman’s influence, I
suspect—but all the same it will be kudos for the man that lands
’em, and I fancy that’s me.”
“Huh! It will be good for you to see Chambers,” said MacKinroy in
a doubtful tone.
 “I shall see him,” said Sergeant Starr. “He has sense.”
The sergeant was right. Chambers had sense, as he made
abundantly evident after hearing the officer’s story.
“You won’t get her, Starr,” he said. “You will lose your kudos, old
chap.”
“You mean she is——”
“There’s another call come for her, a call which takes precedence
over that of the North-West Mounted Police.”
“Hard luck, eh, Chambers? What about them, the youngsters I
mean?”
“Don’t know. No plans yet. Must have a talk with her and with
Paul. Pretty much of a man, that young chap.”
“Let me in on that, Chambers. I might help and it might clear
things up a bit.”
“I shall see about it,” said Chambers. “No use worrying her.”
“Shan’t worry her. Does she know she didn’t kill the man, for
instance?” asked the sergeant.
“True enough. I shall see Paul.”
Paul’s answer when the missionary broached the subject was a
prompt and decisive negative.
“She is not to be worried. Let the policeman talk to me if he
wishes, but he is not to see her. She has for six years been haunted
by a dread of the police. Her whole tribe have covered the trail all
this time. Let her go in peace. Let him talk to me.”
The following morning it was that the sergeant, sauntering about
the Post, came to the hut placed by the factor at the disposal of the
Indian woman and her family. He was met at the door by Paul, who
immediately stepped outside and closed the door behind him.
“You can’t come in,” he said, facing the sergeant.
“No?”
“No!”
 “It would be good that I should see the sick woman,” said the
sergeant in a courteous voice.
“You will not see her,” said the youth. The sergeant noted, as it
was his business to note, the glitter as of steel in the blue grey eye,
the lips thin to a line, the muscles stiffen as for a spring.
“Steady, young man,” he said in a quiet voice. “Don’t do anything
rash. I don’t want to hurt her or you. But I must interview her.”
“No!” said Paul.
“Young man, I must do my duty.” At the word Paul wavered.
“Your duty? Yes, you must do your duty. But she is very ill. She is
dying. Ask Mr. Chambers. He knows.” The distress in his face
touched the sergeant’s heart.
“I shall see the missionary,” he said.
“Oh, thank you,” said Paul, impulsively offering his hand. “She is
very ill. She would be afraid of you, and she must not be troubled. It
will be only a few days.”
“All right, young man. We won’t do anything to hurt her. You are
all right.” He shook hands warmly and went on his way.
 CHAPTER XVIII

It was the Indian woman herself that settled the matter of the
interview with Sergeant Starr. After a day’s pain more acute than
usual she sent for the missionary.
“I have something to tell you. Can you receive my confession and
give me absolution?” she asked him, acute anxiety shining in her
dark eyes.
The missionary, being more man than missionary and having had
large experience of the soul with its burdens of sin and terror,
answered quietly, “Tell me your trouble. Do not fear. There is
forgiveness for you, and peace.”
“I have done a very wicked thing. I want absolution and the holy
oil before I—go away. And I want you to put it on paper for the
police at Edmonton. It is for Paul—it may hurt him. It is—for Paul,”
she added, clutching the missionary’s arm. “Nothing must hurt Paul.”
“Dear sister, tell me your sin, and if you wish you may tell the
police yourself. He is here.”
“Here? Here?” A momentary fear leaped into her eyes, then faded
out. “Ah, good! Let him come. Let him come, quick! And Paul. Quick!
Quick!”
“He will come at once,” said the missionary, and hastened to bring
the sergeant. At the door he met Paul. “She has asked to see the
sergeant,” said Chambers.
“Wait,” said Paul, and went to her. He found her in a fever of
eagerness and impatience.
 “Ah—Paul—” she panted, “now I know the blessed Mother hears
my prayer. Bring the man—the policeman to me—quick! I have a
heavy load here,” she struck her breast, “I wish to give it to him.”
“Why not tell the missionary, Onawata?” said Paul. “You need not
tell the policeman.”
“No, Paul. The policeman is best. Oh, I have prayed to get to
Edmonton to tell the police. Bring him, Paul. Bring him. I am strong,
and I must tell him. Go, Paul, quick.”
Without delay Paul did her bidding. And in a few minutes the three
men were at her bedside.
“You have found me,” said the Indian woman, smiling
triumphantly at the sergeant.
He gazed at her in amazement. Indian women of all types he had
known, good and bad. But this type was unknown to him. Indian she
was, but the soul looking through her dark eyes was the soul of a
refined and gentle woman, and her voice and speech suggested a
lady of his own race.
“You need not fear,” he said gently.
“Fear?” she said, still smiling. “Oh, no, I have no fear of you. You
cannot hurt me. But I am glad you are here. I asked the priest to
bring you. He is a good man. He will listen and you will listen. I have
something to tell you. And Paul will listen too. It is for Paul I speak.”
Her breath began to come in gasps.
“Do not distress yourself; wait till tomorrow,” said the missionary.
“No! no! Now! now! You will put it down for the police.” Her eyes
carried her appeal to the missionary’s heart.
“I will put it down,” he said in a quiet voice, “if you will speak
quietly.”
“I will speak quietly and will speak only the truth.” She fumbled at
her bosom, drew forth a crucifix, kissed it, and in a voice calm and
devoid of all trace of emotion told her story.
“It was his fault that my man was killed,” she concluded. “I
planned to kill him. It was right that he should die, but for Paul I
changed my mind. That night it was not in my heart to kill. I went to
his house to get back from him money he had taken from my man,
for Paul. Then I would go away, with my children, back to my
people. He tried to do me wrong in his house. I struck him with my
knife. The Chippewayan strikes but once. Then I was afraid. I put
fire to the house, that my trail might not be found, and, like the
storm wind, my pony carried me home. Before we could go Paul
found us and came with us. He would not let us go alone. It was
folly. Now I have brought him back before the light goes out of my
sky. For these long, long years we have been like the wild deer, or
the fox in the forests and mountains.” She paused, exhausted.
“Yes,” said the sergeant, “we could find no trace of you.”
“My father’s people would leave no trail of the daughter of their
chief,” she said proudly. “Now,” she continued, after she had rested a
few minutes, “I bring the son of my man back to his people. He is
not Indian, and he must not join himself to my people. I have kept
him clean. He will be great among his own people. This his father
would wish. I have brought him back. You will take him to his
people.” She turned her eyes upon the sergeant, waiting his answer.
“I will bring him back,” he said. “I give you my word.”
“Good! That is all. My work is done now,” she said with a little
sigh. “I have spoken true words.” Once more she kissed the crucifix.
“Listen,” said the sergeant. “The man you struck did not die. One
of our men pulled him from the burning house. He lives today.”
“Sleeman is alive?” exclaimed Paul.
“Alive?” said the Indian woman. “Wait, Paul. You will let me
speak.” She lay for some moments with eyes closed, then in a voice
which shook with emotion she cried, “Alive? Ah! ah! I was glad he
was dead, now I am glad he is alive. The good Father told me it was
not good to go—to pass—with blood on the hands. The Holy Mother
was praying for me! It is good!” She turned her dark eyes upon Paul.
“No, Paul. You remember your word to your father. That is done.”
She put her hand on his arm. “No! no! That is not the way of your
people. For me? Perhaps. For you? No! It is not your law.” Again her
eyes searched his pale set face.
“He would have wronged you, Onawata, my father’s wife. There is
only one thing for me—only one.”
“Paul, I have brought you back to your people. I have kept you
clean. You will be a great man among your people. You will promise
me.” She raised herself on her arm. “I go—perhaps I shall see your
father, my chief. I cannot go without your word. A-a-ah!” her voice
rose in a wailing cry. “To him, to you, I brought only sorrow and
shame. Lay on me no more, Paul. I have suffered much.” She
fumbled under the pillow and drew out and unwrapped a small
parcel, carefully wrapped in deer skin. “Take it, Paul. It is your
mother’s good book. You will kiss it and say you will not kill the man
—for her, for her, Paul!” Her voice rose in a cry, her hands reached
trembling toward him.
The boy was terribly shaken with the struggle going on in his soul.
He knew the book well. He took and turned it over in his hands,
opened it at the fly-leaf, read in faded lettering the words written, he
well remembered when, “For my son Paul, from his mother. ‘Blessed
are the pure in heart, for they shall see God.’” The scene flooded his
memory—the Pine Croft living room, his mother’s face with its
wondering, tremulous smile as he told her how up through the tops
of the pines, between the little white clouds he could see God
looking down at him. He remembered how, as she was tucking him
in that night, she brought him a new Bible, with his name in it and
her name and the beautiful words about seeing God, and how she
kissed the book and kissed him as she gave it into his hands. Like a
mountain torrent sweeping away a dam, the surging tide of his
emotion swept away his control. He dropped on his knees by the
bed, pressed the words to his lips, sobbing.
“Oh, Mother, Mother! dear, dear Mother! For your sake! Yes, yes!
for your sake!”
The men turned away and moved softly from the hut, leaving the
two alone. The Indian woman lay back, spent and done. She had
fulfilled her trust. She had brought back to his people, clean from
lust and from blood, the son of the man who was to her as God
Himself. Next day the sergeant went north on his quest, carrying a
message to the Athabascan chief from his daughter.
The passing of Onawata was all peace. An hour with the
missionary, even though he was not of her faith, brought her
something of the peace that passeth understanding. There was still
her anxiety for the future of her children, which she had settled in
her own way. There only remained the telling of it to them, and that
she deferred till the very last.
They were together in the little hut after a day of quiet rest and
freedom from pain.
“Here, Tanna,” she called in her soft Chippewayan tongue. “Come
hither, little Singing Water, light of my eyes. Come in beside me.” She
gathered the child in her arms and held her close. “Peter, come too.”
The boy came and knelt by her bed, his dark face set as if cast in
bronze. He well knew what was before them all. His mother’s arm
went round his shoulders.
“Little ones, your mother is going away,” she began, her voice
coming softly and evenly, like the flowing of quietly running water,
“away to a good country—ah! a good country!—where the warm sun
is always shining, no frost, no snow, no hunger, no pain, no sickness,
no fear, no fighting, no blood. Oh, it is a good country.” She lay quiet
a few moments, her dark face growing young and beautiful. The
little girl’s fingers crept over her face.
“Oh, Mammy, you are smiling. When will we go? I do not love the
cold and the hunger, and I want no more pain for you, Mammy
dear.” The little one spoke in her father’s tongue. Her mother had
seen to that. “And, Mammy, there will be no more dark. I know! I
know!”
The mother drew the little one close to her with a low moaning
cry and again she lay silent, drinking slowly to the dregs that last
bitter cup that all mothers must drink. But having drunk, she set
herself to her last service for them.
 “Not today will you come, Singing Water,” she said, her voice
flowing softly again. “I will go and later you will come, and Peter and
Paul. And now you will listen and remember, you and Peter, while the
sun shines and the winds blow you will not forget.”
“Yes, Mammy,” whispered the child.
“You and Peter will go back to my people.”
“No,” said Paul, speaking with sharp decision. “Where I go they
will go.”
“They are not your people, Paul.”
“They are my father’s children.”
An eager light came into the woman’s eyes.
“Paul! Paul!” she cried in English. “You do not know what you say.
They are of my blood. They will be a burden on you. They will spoil
your life. Your father, Paul, did not wish that, I know. Peter will be a
great chief. He will care for Tanna. I have planned this with my
father. They will drag you down as I dragged your father down. I—
who would have given him the blood from my heart! You must not
do this.” Her voice was eager and tremulous with pain. “I will not
spoil your life too.”
“They are my father’s children. They are my brother and sister,”
said Paul, in a voice steady and strong. “Do you think I can leave
Tanna to go back to the blanket and the wigwam? Tanna! my little
blind sister!” His voice rang out in indignant scorn. “No, no, Mammy,”
he added, using Tanna’s form of address, rare with him, “say no
more. It is settled. They go with me.”
A look of great wonder dawned in the woman’s eyes—wonder and
joy. Raising herself she held out her hands to him.
“Paul!” she cried, her voice broken with sobs, the tears flowing
down her cheeks. “Your God hears! Now I know, I know! Oh, I
feared to lay this burden on you, but now I know He hears. I was
afraid for Tanna, my Tanna living in the dark. I feared for her. But
now——”
 Paul took her hands in his, leaned over and, for the first time in
his life, kissed her.
“Have no fear, Mammy,” he said softly. “I will keep her with me
always—always.”
The blood slowly came up into her dark face, touching it with rare
beauty. Passionately she kissed his hands.
“My chief!” she whispered. “You will do this!” She turned to the
children. “Peter! Tannawita!” she said, reverting to her own tongue,
“listen to me now.” Her voice was solemn, almost stern. “Give Paul
your hands, quick!” Wondering, the children put their hands in
Paul’s. “You are going with Paul, your brother. He is your chief, to
obey, to love, to serve with your lives, always.” She plucked the
crucifix from her breast. “The Holy Jesu, the Jesu of the Cross hears
your promise.” She pressed the crucifix to their lips, then to her own,
and lay back, pale, upon the pillow. When she had rested a little she
opened her eyes.
“Paul,” she whispered, raising her arms toward him, while into her
eyes came a look of shy, adoring love. “You are a good man. God
will always go with you and them.” She drew him down and kissed
him.
“Yes, Mammy, I know,” said Paul, kissing her in return.
In a few moments, exhausted but with a great peace in her heart,
the mother fell asleep, her children beside her and Paul watching by
the fire. An hour later the missionary came in, his wife following.
“She is asleep,” said Paul.
The missionary leaned over her. “Yes, she will rest quiet now,” he
said, gathering up the little girl in his arms. “Take the children with
you, Mother,” he added, giving the sleeping Tanna to his wife. “You
go too, Paul, I will watch now.”
They laid the Indian woman under a clump of spruce trees near to
the lake shore, the little crucifix on her breast, and on her face,
made beautiful with the beauty of youth, a great peace.
 Before a month had passed a tall eagle-faced Chippewayan
warrior, splendid in his chief’s dress and decked in the colors for the
dead, and with him six tall Chippewayan braves, came stalking into
the Post. Gravely he greeted Paul.
“Wah-na-ta-hi-ta comes for his dead,” he announced.
“She lies under the spruce trees there,” said Paul. “She gave me
much love for you. She was at peace when she went away.” And
then, bringing him in to the hut, he told him the story of his
daughter’s passing. The old chief listened with face unmoved.
“I would see this man who gave her peace,” he said gravely.
To the missionary the old chief brought rich gifts in furs and
curiously wrought garments, refusing all gifts in return. It was not
seemly that his dead should be in debt for any service done. Then
the missionary, reading the grief and haughty pride in the piercing
dark eyes, told him of his daughter’s last days, of her peace, her
hope, and her willingness to go. And as he told the story the stern
lines in the bronze face grew soft, the piercing eyes grew kind.
“Good man!” he said in English, offering his hand. “Good heart!”
touching the missionary on the breast. “The Great Spirit will
remember.” And in token of his gratitude he and his six men deigned
to break bread at the missionary’s table and to accept gifts at the
missionary’s hands.
After two days he made ready to go. Peter and Singing Water he
was for taking with him.
“She gave them to me,” he said in his own speech, which Paul
knew as well as he. “The little one will be in my heart and keep it
warm. The boy will be my son. He will be chief of my people when
my camp fire is cold.”
“No!” said Paul gently, but looking straight into the fierce old eyes.
“They are my father’s children, my brother and my sister. Their
mother put their hands in mine. They will tell you.”
Peter and Tanna were called.
 “She gave me to him. I put my hands in his. I kissed the Holy
Cross. He is my chief,” said Peter simply.
“And you, Singing Water?” inquired the chief, his voice soft and
tender.
The little blind girl moved quickly to the old chief’s side, passed
her fingers over the hard bronze face.
“I love my mother’s father,” she said gently, “and my mother’s
people. You were all so good, so good to me. But—but——” here the
tears ran down from the beautiful sightless eyes, “my mother gave
me to Paul. I—I—oh! I must go with Paul.”
The chief stood staring toward the spruce trees, his face fixed in
every line.
“It is good,” he said. “I shall go back to my people with my dead—
alone! My heart is cold. Soon the light in my eyes will become night
and in my ears will be no song of the Singing Water.” Then, with a
sudden and stern solemnity, he turned to Paul. “They have given
their hands to you. You are their chief. The chief hunts, fights, lives,
dies for his people. Will you?” He thrust his eagle face into Paul’s, his
fierce old eyes piercing to the young man’s very soul.
Not for an instant did Paul flinch or falter, but, giving glance for
glance, and yet with a grave and gentle courtesy, made answer, “I
have promised.”
For some moments the eyes of each held the other’s, then
sweeping in one all-embracing gesture earth and sky, the old chief
intoned as in a solemn ritual, “The sun, the sky, the earth, these
have heard. These will remember. The eyes of the Great Spirit are
never shut. They will follow the trail through the forests, over the
mountains and down the valleys, while the winds blow and the rivers
run.”
For a moment he held Paul’s hand in his, then gave both hands to
the boy Peter, kissing him on both cheeks. For a long time he stood,
obviously striving to get hold of himself, then, in a voice that in spite
of his iron control faltered and broke, he said, “Come, Singing
Water.”
 With a cry the child sprang toward him. Lifting her in his arms he
kissed her eyes, her forehead, her lips, while she clung sobbing.
Then giving her to Paul he turned away. With stately grace he waved
farewell to the group at the missionary’s door, and, followed by his
six tall Chippewayans, he set his face toward his own North land,
with never a look behind, taking his dead with him.
 CHAPTER XIX

“How do you like your young cowboy, McConnell?”

“Oh, all right, Starr. Seems a nice quiet young fellow.”
The two men were smoking on the verandah of Sergeant Starr’s
neat little house at the Mounted Police Headquarters. They were old
friends, such friends as Western men become who have stood by
each other when life and death were in the game.
“He is all that. I owe him something,” said the sergeant.
“Oh, that’s all right, Starr. I’ll straighten that out. How much?” said
the big Irish rancher.
“How much? Hot much,” replied the sergeant. “Only my life.”
“Mother o’ Moses! Let’s have ut!” McConnell had a habit in
moments of excitement of reverting to the speech of his childhood.
“Well, it is something of a story. Have you time for it?”
“All the time on the face av the clock, if it’s a story. You mean this
last trip? You never told me, Starr—and you promised it to me. Spit
it out, old boy.”
“It is some story, and but for that young chap I wouldn’t be here
telling you today. Well, here goes. I told you how I found him up at
Fort Reliance Hudson’s Bay Post, two hundred miles up in the
Athabasca, on my way north after a half-breed wanted for murder,
Guerrin by name. Told you how he got there with his Indian
stepmother and two kids. Had the bad luck on my up trip to have to
ditch my corporal—frozen foot—so had to play a lone hand. Got my
man, though, and brought him back to Fort Reliance. Let me tell you
that every minute of that trip, day and night, I had my hand on my
hip. That half-breed Guerrin was an old friend of mine. Twice I had
spoiled a little game of his, and this time I knew that with the
prospect of a hemp-dance before him he would stop at nothing. So
it was man to man every minute of the march.
“When I got back to MacKinroy’s I found that the Indian woman
had died and that Paul had arranged to leave the youngsters in the
meantime at the Mission School and was keen to get back to
civilisation. I struck a bargain with him to bring him out and find him
a job if he’d help me out on the trail here. For the first three days all
was serene. My prisoner apparently had thrown up the sponge, and
was all in mentally, a case of collapse, with Indian stoicism accepting
his fate and obeying orders like a whipped cur. At least, so I thought.
At the end of the third day my cursed luck threw me into an ice
crack, twisted my ankle, broke a small bone as a matter of fact the
doctor here says, and there I was seventy miles or so from the Fort
here, with a murderous prisoner, a deadly fighter, strong as a bull,
cunning and cruel as a lynx, and with me a boy raw to this game,
untried. I had to take to the toboggan, rations were cut fine, very
fine, and the trail was getting more and more rotten every mile. I’ve
had many more cheerful nights than that night, as I lay sleepless by
my fire, planning my course and weighing my chances. My chances
seemed slim enough, I confess to you.
“Next morning I tied my bucko up to a tree and took the boy off
for a council of war and set before him the facts—no neutral tints in
the picture, I assure you.
“‘He’s a devil in a fight,’ I told the boy. ‘Man to man on equal
terms he could beat up either one of us.’
“I liked the cool, questioning look in the boy’s eyes. I learned
afterwards that he had gone through the braves in old Wah-na-ta-hi-
ta’s tribe and come out top dog. But he had never gone the full limit
—never killed a man.
“‘And this half-breed Guerrin has it in for me. He would rather get
me than get free, I believe. He knows all the tricks too. Can we take
him through, or will we have to let him go, Paul?’ I said, trying him
out. He could not hide the surprise, the contempt in his eyes.
“‘I thought the Mounted Police always got their man,’ he said.
“‘They do—finally—but sometimes a Mounted Police has had to
pay the price,’ I said, keeping my eyes on his.
“‘Of course,’ he said, without a quiver of a lid, ‘they do their duty.’
“I tell you, old man, from that minute I felt sure we would make it
or both be feeding the wolves. Then I sprung my plan on him.
“‘Paul,’ I said, ‘I’m going to swear you in as a special constable.’
“‘Can you?’ he said.
“‘I have the authority. Are you willing?’
“‘For this trip?’ he asked. ‘Yes, I am willing.’
“I swore him in, told him my plan. ‘Here’s a gun,’ I said, offering
him one of mine.
“‘Have one—my father’s.’
“‘Can you shoot?’
“He gave me a jolt then. He looked about, saw a squirrel
chattering and whisking on a scrub pine, his hand flashed from his
pocket—bang! bang!—and the squirrel dropped, with two holes
through its body.
“‘Dad showed me, and I’ve been practising a bit in the north for
the last five years.’ I just gulped.
“‘You’ll handle him,’ I said.
“‘Who?’
“‘Guerrin!’
“‘Never killed a man—don’t want to—couldn’t!’
“‘Rather he’d kill you? or me?’
“He looked at me doubtfully. ‘I don’t want to kill him. I couldn’t kill
him.’
“‘All right, let him kill me.’
 “No, I think I could stop him,’ he said. Not very satisfactory, but it
was the best I could get out of him.
“We took watch about. But Guerrin fooled me properly. I don’t
deserve to be alive. After fifteen years in the force, handling bad
men of all kinds! That devil played ’possum, dragged back, growing
weaker and weaker, couldn’t eat, staggered on march like a drunken
man, and at the end of the first day fell down and lay like a log.
Begad, I thought I’d never get him in. The whole weight fell on Paul,
trail breaking, packing, mushing. Two nights out from the Fort,
Guerrin staggered into camp, fell down and refused to move. We
made him comfortable before the fire, fed him soup and stuff. Paul
was pretty well in that night, and didn’t tie up my prisoner. I took
the first watch myself, hadn’t had much sleep so fell off. Don’t know
what it was—one of the dogs, I think, gave a snort in his sleep—I
opened my eyes, and, by Jove! six feet away was Guerrin, knife in
hand, on the crouch for a leap. I gave one yell and flung myself as
far as I could to one side. His knife touched a rib and glanced off.
Before I could get my gun he was on me, jabbing like all possessed.
I managed to grab his knife hand and hold him off. My shout woke
Paul, but he seemed dazed for a moment.
“‘Shoot!’ I yelled. ‘Shoot, you damned fool!’
“With one leap he covered the distance between us and was at
Guerrin’s throat. But that half-breed was like a wild cat; he squirmed
free and was off on the forward trail where it opened into a little
lake, Paul after him like a hound after a fox. ‘Shoot! shoot!’ I kept
yelling. He paid no attention. I laced up my moccasins, tied up my
foot and hobbled off as best I could after them. I hadn’t gone one
hundred yards when I came on ’em. Say, there was nothing to it.
That boy was all over him like ten thousand cats, and before I could
come up had him lying quiet and still, not a move out of him. I don’t
know what he did or how—knocked him out, I fancy—but that breed
walked back to camp, dropped to his bed and went to sleep like a
baby.
“‘How in hell did you get him?’ I shouted at him, for I confess I
was considerably worked up.
 “‘Oh, quite easy. He can’t run very fast and he doesn’t know how
to fight.’ The champion runner and the wickedest fighter in the North
Country!
“‘Where did you learn to fight?’
“‘Uncle taught me to box, and I used to wrestle with the Indians
in the north.’ I learned after some trouble that he had licked the
whole tribe at it.
“The rest of the journey was like a walk to church. I wanted him
for the force, but he’s bound to make money and make it fast. That’s
why he went to you. How is he doing?”
“All right. Quiet chap. The boys haven’t quite got on to him, poke
fun at him a bit. ‘Squatty’ Hayes is inclined to ride him a bit.”
“Well, my advice to Mr. ‘Squatty’ Hayes is to not monkey with the
band wagon or he may get his feet in the spokes.”
“He is keen now about learning the rope, working at it every off
minute. He can ride all right, but doesn’t know the rope.”
“He’ll get it. That’s his kind. He’s a finisher, you hear me. I’m
interested in that boy. Owe him a lot. Besides, he has a way that
gets me. And the missus and the kids are just a little worse.”
“All right, Starr, we’ll do our best for him. We’ll shove him along all
we can.”
The big Irishman was as good as his word, for before the summer
closed on the Three-Bar-Cross Ranch Paul had worked his way to the
first rank as a cowman and was drawing pay second only to the
foreman, “Squatty” Hayes, and without exciting the envy of any of
his fellow-riders, unless it was that of “Squatty” to a certain extent.
But “Squatty” was too sure of himself and too lazy, if the truth be
told, to worry over the rapid rise of a kid rider like Paul. The boy he
bullied unmercifully, making him fetch and carry shamelessly. But
Paul’s good temper and good cheer were unfailing and he never
seemed to notice what was so obvious to every rider on the ranch as
well as to every member of the McConnell household. Nor would he
ever have noticed “Squatty’s” tendency to ride him had it not been
that the indignant fury of McConnell’s fiery hearted and fiery headed
sixteen-year-old daughter Molly made her take a hand in the game.
One evening as Paul came riding up to the bunk house door after a
long day in the saddle and was walking stiff and weary with his
horse to the corral, “Squatty’s” big voice boomed out after him.
“Hey, there, kid! Bring up my bronk, will you? I’m in a hurry. Get a
move on!”
“All right, ‘Squatty,’” answered Paul cheerily.
“Say, Paul! Don’t you do it!” rang out the girl’s voice, till the whole
bunk house heard. “Why do you let that big stiff boss you around?”
Paul stood looking at her in mild surprise. “Why? Well, he is boss,
isn’t he?” he said, a slow smile coming to his face.
“You’re hired to ride herd, not to lick his boots.”
“Why, I don’t——”
“You do!” cried Molly, flinging down the reins on the neck of her
temper. “You do! Tell him to go to hell!”
“All right,” said Paul cheerfully. Then, raising his voice, he sang
out, “‘Squatty,’ you go to hell!” and moved off with his pony to the
corral.
A high tide of strongly sulphurous and quite unintelligible language
preceded “Squatty” from the bunk house, ending in the quite
intelligible question, “What’s that you say, kid?”
“Didn’t you hear?” inquired Paul innocently, as he strolled on his
way.
“Look here! you blankety, blank young pup, I’ll knock your blank,
blankety blank head off.”
Paul stopped abruptly, swung his horse round, and leaned up
against him.
“Ladies present, ‘Squatty,’” he said quietly. The quiet tone was like
oil to flame with “Squatty.”
“Huh!” said Molly. “He don’t make no difference for them!”
“I’ll show you!” said “Squatty,” striding up to Paul and throwing his
full weight into a swinging drive with his right at the boy’s head.
 Just what happened no one of the company about the bunk house
door, much less “Squatty” himself, could explain, but when the slight
confusion was past the foreman was discovered to be quite helpless
in the boy’s grip and yelling for mercy. What had happened was after
all very simple to one who had become a master of all the tricks of
Indian wrestling. Paul with his right hand had met the reckless drive
of “Squatty’s” mighty right with a grip on the wrist, had swung the
body half round, twisted the arm up behind the back and with his
left wreathed in the back of “Squatty’s” coat collar now held him
powerless and in agony.
“Let go, for God’s sake, kid,” groaned “Squatty.”
“I don’t want to hurt you, ‘Squatty,’” said Paul pleasantly, “but you
mustn’t do things like that, eh?”
“No, no, cut it out. I was just fooling,” said “Squatty.”
“So was I,” said Paul, letting his man loose. “And I’ll get your
horse for you if you’re tired.”
If ever there was a puzzled man it was “Squatty.” His
astonishment completely neutralised his rage. His eye ran up and
down over the slight, boyish figure. He still felt that steel-like grip
that had held him helpless.
“Say, kid, we’ll call it a game,” he said, offering his hand. “You
don’t need to get no horse for me.”
“Sure, I will, Squatty,” said Paul, heartily shaking his hand. “I’m
not as tired as I was.”
He swung himself on his pony and loped off after the foreman’s
horse, leaving a group behind him dumb with mingled surprise and
admiration. It was Molly who broke the impressive silence.
“Say, ‘Squatty,’ we’re always learning some, ain’t we?” she said
with a grin.
With grave deliberation “Squatty” paused to eject a stream of
tobacco juice, wiped his lips carefully with the back of his hand, and
made reply, “Molly, some fools git beyond the learnin’ age. You and I
ain’t that kind of fool.” And from that hour and for many a long year,